WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:チェックボックスにチェックするとその行が全て消えるには。

0:[投稿] ひよっこ [2006/12/20 15:41 ] [環境:win2006 バージョン6.0 わかりません]

二回目の投稿となります。

こちらもとある表を作っています。
”除外”というチェックボックスにチェックを入れると
その行を消したいと思っています。

もしこの方法をご存知の方がいらっしゃいましたら
お力をお貸しください。

以下かが作成していますソースです。

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<title></title>
</head>
<body>
<form name="chB">
<table border="1" >
<div>テーブルリスト</div>
<tr>
<th>&nbsp</th>
<th>除外</th>
<th>あ</th>
<th>い</th>
<th>う</th>
<th>え</th>
<th>お</th>
</tr>
<tr>
<th>1</th>
<td align="center"><input type="checkbox"></td>
<td>か</td>
<td>き</td>
<td>く</td>
<td>け</td>
<td>こ</td>
</tr>
<tr>
<th>2</th>
<td align="center"><input type="checkbox"></td>
<td>さ</td>
<td>し</td>
<td>す</td>
<td>せ</td>
<td>そ</td>
</tr>
</table>
</body>
</html>

こちらもどうか宜しくお願いします。


1:[回答] rerere [2006/12/20 16:24 ]

document.forms(フォーム名).Reset()
とかすればできると思いますが。


2:[質問] ひよっこ [2006/12/20 16:44 ]

回答いただきましてありがとうございました!
そしてすみません。
先ほどの回答を受け、以下のように追加したのですが
動作しませんでした。
おそらくrerereさんのとはまったく違うことを
行ってしまったようです。
Reset()というコマンドがあるということでしょうか。

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<script type="text/javascript">
<!--
function Reset(){
document.chB.ch.value =Reset;
}
-->
</script>
<title></title>
</head>
<body>

<table border="1" >
<div>テーブルリスト</div>
<tr>
<th>&nbsp</th>
<th>除外</th>
<th>あ</th>
<th>い</th>
<th>う</th>
<th>え</th>
<th>お</th>
</tr>
<form name="chB">
<tr>
<th>1</th>
<td align="center"><input type="checkbox" name="ch" onClick="Reset() "></td>
<td>か</td>
<td>き</td>
<td>く</td>
<td>け</td>
<td>こ</td>
</tr>
</form>
<tr>
<th>2</th>
<td align="center"><input type="checkbox"></td>
<td>さ</td>
<td>し</td>
<td>す</td>
<td>せ</td>
<td>そ</td>
</tr>
</table>
</body>
</html>


3:[回答] ティルド [2006/12/20 18:30 ]

どのようなことをやりたいのかいまいちわからないのですが・・・。
こんな感じでしょうか。

<html><head><title>無題</title>
<style type="text/css">
.styleLine {
    visibility: visible;
}
</style>
<script type="text/javascript">
function DeleteLine(n) {
    document.getElementById("DeleteTarget" + n).style.visibility = "hidden";
    return;
}
</script></head><body>
<table border="1">
<tr><th></th><th>除外</th><th>あ</th><th>い</th><th>う</th><th>え</th><th>お</th></tr>
<tr id="DeleteTarget0" class="styleLine">
<th>1</th><td align="center"><input type="checkbox" onClick="DeleteLine(0);"></td>
<td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td></tr>
<tr id="DeleteTarget1" class="styleLine">
<th>2</th><td align="center"><input type="checkbox" onClick="DeleteLine(1);"></td>
<td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td></tr>
</table>
</body></html>


4:[回答] ひよっこ [2006/12/21 09:41 ]

そのとおりです!!
ただ、絞込みをしなくてはいけないので
行の間隔が狭まるといいのです。

伝え方がいまいちでしたね。
でも汲み取っていただけてうれしいです!


5:[回答] ティルド [2006/12/21 12:21 ]

それならinnerHTMLを使ってやると良いと思います。
ただ、他にもいろいろやり方があるかもしれません。
とりあえず作ってみました。

<html><head><title>無題</title>
<style type="text/css">
.styleLine {
    visibility: visible;
}
</style>
<script type="text/javascript">
function DeleteLine(n) {
    document.getElementById("DeleteTarget" + n).innerHTML = "<tr><td></td></tr>";
    return;
}
</script></head><body>
<table border="1">
<tr><th></th><th>除外</th><th>あ</th><th>い</th><th>う</th><th>え</th><th>お</th></tr>
<span id="DeleteTarget0"><tr class="styleLine">
<th>1</th><td align="center"><input type="checkbox" onClick="DeleteLine(0);"></td>
<td>か</td><td>き</td><td>く</td><td>け</td><td>こ</td></tr></span>
<span id="DeleteTarget1"><tr class="styleLine">
<th>2</th><td align="center"><input type="checkbox" onClick="DeleteLine(1);"></td>
<td>さ</td><td>し</td><td>す</td><td>せ</td><td>そ</td></tr></span></table>
</body></html>

ちょっと読みにくいかもしれませんが、ちゃんとこれを見て「なぜこうなるのか」を理解してから使ってくださいね。


6:[完了] ひよっこ [2006/12/21 14:58 ]

これこそまさに行いたかったものです!
innerHTMLに関しては、実は、あるボタンを押すと
テキストエリアではない場所に数字が出るという
記述で使用していました。
それは知識のある人が困っていた自分に教えてくれた
方法だったのですが、そのまま調べることもなく
使用していました。
この解決方法の糸口がすぐそこにあったのですね。
今回、少々反省しました・・・。
調べて出直します・・・。
すみません。
ありがとうございました!

回答(必須): 状態:

お名前(必須):

URL:




[戻る]