- PR -

JavaScriptでの表の行の表示・非表示の切り替え

1
投稿者投稿内容
sheer
会議室デビュー日: 2005/09/04
投稿数: 4
投稿日時: 2005-12-18 20:04
いつも勉強させて頂いております。
現在、セレクトボックスからある値を選んだときだけ、表に2行表示したいと思っており、JavaScriptにて制御を考えています。

現状では、ある値（テスト1）を選んだときだけテキストを出すことはできるのですが、どうしても2行表示するという事ができません。
どうすれば、テスト1を選択したときだけ2行表示し、テスト1以外を選択したときは非表示にする事ができるのでしょうか。ご教授下さい。

ソースは以下の通りです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>プルダウンメニューでページ内の表示を変える</title>
<script type="text/javascript" language="JavaScript">

<!-- 選択された値によって、行の表示・非表示を切り替える
function showthis(sel) {
var value = sel.options[sel.selectedIndex].value;
if(value == "test1"){
if(document.getElementById){
if(document.getElementById(value).style.display == "block"){
document.getElementById(value).style.display = "none";
}else{
document.getElementById(value).style.display = "block";
}
}
}
else if(value != "test1"){
if(document.getElementById){
document.getElementById("test1").style.display = "none";
}
}
}
// -->
</script>
</head>
<body>

<h2>選択されたものによって、行の表示・非表示を切り替える</h2>

<table border="1" width="367">
<tr>
<td width="134">
<form>
<select onchange="showthis(this)">
<option selected="selected">選んでください</option>
<option value="test1">テスト１</option>
<option value="test2">テスト２</option>
<option value="test3">テスト３</option>
</select>
</form>
</td>

<td width="217">
<p>テスト</p>
</td>
</tr>

<tr>
<td width="134">
<p>&nbsp;</p>
</td>
<td width="217">
<p>&nbsp;</p>
</td>
</tr>
</table>

<div id="test1" style="display:none;">
テスト１を選択しています。
（本来はここに2行追加したい）
</div>

</body>
</html>
流れプログラマ
常連さん
会議室デビュー日: 2005/09/30
投稿数: 26
投稿日時: 2005-12-20 01:06
こんにちは。

少し期待値とは異なると思いますが、こういう対策が手軽でいいと思います。
----------
<div id="test1" style="display:none;">
<table border="1" width="367">
<tr><td width="134">
テスト１を選択しています。
</td><td width="217">&nbsp;</td></tr>
<tr><td>
（本来はここに2行追加したい）
</td><td>&nbsp;</td></tr>
</table>
</div>
----------
つなぎ目が見えますけど、テーブルのスタイルシートを調整すれば目立たなくすることができます。

DOMを使えばテーブル行の追加削除を動的に行うこともできるのですが、表示したり消したりということを簡単に行いたい用途では、ちょっと手間がかかりすぎると思います。


[ メッセージ編集済み 編集者: 流れプログラマ 編集日時 2005-12-20 01:07 ]
mio
ぬし
会議室デビュー日: 2005/08/25
投稿数: 734
お住まい・勤務地: 神奈川県
投稿日時: 2005-12-20 09:37
スクリプトの最初の行は、
var value = sel.value;
で良いですね。

それはともかく。

<div id="test1" style="display:none;">
テスト１を選択しています。<br/>
（本来はここに2行追加したい）
</div>

こういうことじゃないんでしょうか？
mio
ぬし
会議室デビュー日: 2005/08/25
投稿数: 734
お住まい・勤務地: 神奈川県
投稿日時: 2005-12-20 09:42
あ、誤解したかな。
test1のときは2行(3行?)、test2のときは1行（2行目以降を非表示）ということでしょうか。
それなら、divの中にdivを作って、そっちの表示を切り替えればいいのではないかと。
sheer
会議室デビュー日: 2005/09/04
投稿数: 4
投稿日時: 2005-12-20 22:16
返信ありがとうございます。
お二方のレス、とても参考になりました。
一度やってみて、試してみます。
ありがとうございました。
1

スキルアップ／キャリアアップ（JOB@IT）