テーブル列の表示・非表示機能の追加

解決済

質問者：ikeike77
質問日時：2009/05/20 19:30
回答数：11件

<table border="0" id="tbl1">
<tr>
<th>A1</td>
<th>B1</td>
<th colspan="2">C1</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>
</table>
というテーブルで、C1列（要はデータcccとdddの2列）を表示／非表示を行いたいです。
調べてみたところ、colspanが設定されている例がありませんでした。

お判りになる方、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (11件中1～10件)

No.1

回答者： askaaska
回答日時：2009/05/20 20:10

colspanがあろうがなかろうが

やることは同じよ。

消したい場合は対象のセルを全て、
表示したい場合も対象のセルを全て
style.displayを書き換えるだけ。

- 0
- 件

通報する

No.2

回答者： think49
回答日時：2009/05/21 00:36

document.getElementById('tbl1').childNodes

を取得して、childNodesを辿っていって3番目&4番目のtd要素ノードにstyle="display:none;"を与える。

という形になると思います。

TAG indexによく似た質問がありました。参考になるかもしれません。

掲示板/JavaScript質問板/javascript 列を非表示にしたい - TAG index Webサイト
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi? …

- 0
- 件

通報する

No.3

回答者： babu_baboo
回答日時：2009/05/21 08:49

ひょうのせるには、.colSpanってのがあるじょ！

それをかうんとしてはんだんしてる。
style.display は、tabel-cell と inline とがあるじょ
めんどうなので rowSpan は、する～しちゃった
ばぶぅ。

//@cc_on @set @v = @_jscript_version;
function test(tableID, sRow, eRow, vFlag) {
　var t = document.getElementById(tableID);
　var rMax = t.rows.length;
　var cMax;
　var tr;
　var cIdx;
　var obj;
　var disp = /*@if(@v>=8) 'inline' @else@*/ 'table-cell' /*@end@*/;
　
　for (var i = 0; i < rMax; i++) {
　　tr = t.rows[i];
　　cMax = tr.cells.length;
　　cIdx = 0;
　　for (var j = 0; j < cMax; j++) {
　　　obj = tr.cells[j];
　　　if (sRow <= cIdx && cIdx <= eRow) {
　　　　obj.style.display = vFlag ? disp: 'none';
　　　}
　　　cIdx += obj.colSpan;
　　}
　}
}
alert('消す');
test('tbl1', 2,3);
alert('見せる');
test('tbl1', 2,3,true);

この回答への補足

申し訳ありません。皆様を混乱させてしまって・・・

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

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

<html>
<head>
<script type="text/javascript">

</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>

補足日時：2009/05/21 11:49

通報する

- 0
- 件

通報する

No.4

回答者： babu_baboo
回答日時：2009/05/21 08:51

ていせいします

(@v<8)
でした。

- 0
- 件

通報する

No.5

回答者： babu_baboo
回答日時：2009/05/21 09:17

れんとう、ごめん。

colSpan には、0のときもあるらしいので、そのときは・・・
やっぱり while がみじかいじょ

function test(tableID, sRow, eRow, vFlag) {
　var t = document.getElementById(tableID);
　var tr;
　var cIdx;
　var obj;
　var disp = /*@if(@v<8) 'inline' @else@*/ 'table-cell' /*@end@*/;
　var i = 0, j;
　
　while (tr = t.rows[i++]) {
　　cIdx = j = 0;
　　while (obj = tr.cells[j++]) {
　　　sRow <= cIdx && cIdx <= eRow && (obj.style.display = vFlag ? disp: 'none');
　　　cIdx += obj.colSpan;
　　}
　}
}

- 0
- 件

通報する

No.6

回答者： think49
回答日時：2009/05/21 12:11

babu_babooさんの方法が一番スマートですね。

tableの場合、childNodesを使わなくても rows, cells という便利なプロパティがあるようです。

Document Object Model/TABLE
http://homepage3.nifty.com/aya_js/dom/dom03.htm

# あとは、Firebugでいろいろコードをたたけば解決できるんじゃないでしょうか。