プロが教える店舗＆オフィスのセキュリティ対策術

テーブル列の表示／非表示機能の追加～その２

解決済

  • 質問者：ikeike77
  • 質問日時：
  • 回答数：1件

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

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

<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件)

No.1ベストアンサー

  • 回答者： yambejp
  • 回答日時：

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



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

<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質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報