やりたい事は、AAAの列だけ常に表示させておき、BBB(つまり3列分)を表示/非表示になる・・といった事です。
下のHTMLで、変数bbbには「3」が入っているのは確認できましたが、後がさっぱり続きません。

どうぞよろしくお願いいたします。

<html>
<head>
<script type="text/javascript">
<!--
function hide(idName) {
var aaa = document.getElementById(idName).childNodes;
var bbb = aaa[0].length;
alert(bbb);
//-->
</script>
</head>

<body>
<button onClick="hide('list1')">隠す</button>
<table border="1" cellpadding="2" cellspacing="1">
<tr>
<th rowspan="3">AAA</th>
<th colspan="3" id="list1">BBB</th>
</tr>
<tr>
<th width="120">BBB1</th>
<th width="120">BBB2</th>
<th width="120">BBB3</th>
</tr>
<tr>
<th>BBB11</th>
<th>BBB21</th>
<th>BBB31</th>
</tr>
<tr>
<td>aaa</td>
<td>aaa1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
<tr>
<td>bbb</td>
<td>bbb1</td>
<td>bbb2</td>
<td>bbb3</td>
</tr>
<tr>
<td>ccc</td>
<td>ccc1</td>
<td>ccc2</td>
<td>ccc3</td>
</tr>
</table>
</body>
</html>

「テーブル列の表示/非表示機能の追加~その」の質問画像

A 回答 (1件)

同じような質問をしない方がよいです・・・。



かなり手を抜いてますがこういうことでどうでしょう?

<html>
<head>
<script>
function hide(n) {
var tags=document.getElementById("tbl1").getElementsByTagName("*");
for(var i=0;i<tags.length;i++){
var cn=tags[i].className;
if(cn==n) tags[i].className=n+" hide";
if(cn==n+" hide") tags[i].className=n;
}
}

</script>
<style>
.list1{
}
.hide{
display:none;
}

</style>

</head>
<!--京-->
<body>
<input type="button" value="隠す/見せる" onClick="hide('list1')">
<table border="1" cellpadding="2" cellspacing="1" id="tbl1">
<tr>
<th rowspan="3">AAA</th>
<th colspan="3" class="list1">BBB</th>
</tr>
<tr>
<th width="120" class="list1">BBB1</th>
<th width="120" class="list1">BBB2</th>
<th width="120" class="list1">BBB3</th>
</tr>
<tr>
<th class="list1">BBB11</th>
<th class="list1">BBB21</th>
<th class="list1">BBB31</th>
</tr>
<tr>
<td>aaa</td>
<td class="list1">aaa1</td>
<td class="list1">aaa2</td>
<td class="list1">aaa3</td>
</tr>
<tr>
<td>bbb</td>
<td class="list1">bbb1</td>
<td class="list1">bbb2</td>
<td class="list1">bbb3</td>
</tr>
<tr>
<td>ccc</td>
<td class="list1">ccc1</td>
<td class="list1">ccc2</td>
<td class="list1">ccc3</td>
</tr>
</table>
</body>
</html>
    • good
    • 0
この回答へのお礼

ありがとうございました。
別の方の回答と組み合わせて、望みのものができました。

お礼日時:2009/05/23 10:36

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング

おすすめ情報