- ベストアンサー
テーブル列の表示・非表示機能の追加
<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が設定されている例がありませんでした。 お判りになる方、よろしくお願いします。
- ikeike77
- お礼率29% (5/17)
- JavaScript
- 回答数11
- ありがとう数5
- みんなの回答 （11）
- 専門家の回答
質問者が選んだベストアンサー
rowSpan が、からむとてーぶるのてんかいが、ちょうめんどう！ いじでも といてやろうと かんがえたあげく、こんなのが・・・ 上級者の方の解法をお願いします。 <button onClick="test('tbl1','list1')">隠す</button> <table border="1" cellpadding="2" cellspacing="1" id="tbl1"> <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> <script type="text/javascript"> <!-- function test(tableID, targetID) { var tr = document.getElementById(tableID).rows; var eTgt = document.getElementById(targetID); var x1 = eTgt.offsetLeft; var x2 = x1 + eTgt.offsetWidth; var d = []; var o1, o2; var c1 = 0, c2, c3 = 0; while (o1 = tr[c1++]) { c2 = 0; while (o2 = o1.cells[c2++]) if (x1 <= o2.offsetLeft && o2.offsetLeft < x2) d.push(o2); } while (o1 = d[c3++]) o1.style.display = 'none'; } //--> </script>
その他の回答 (10)
- babu_baboo
- ベストアンサー率51% (268/525)
test('てーぶるのID',1,3); ではだめってことでしょ？
- babu_baboo
- ベストアンサー率51% (268/525)
しつもん。 「れつをけす」がただしいの？ 「とくていのせるをかくす」がただしいの？ 「ひょうのどこであれ、していしたIDのあるれつすべてをけす」？ にほんごむずかしいからさぁ。ばぶ。
補足
すみません。スレを変えて画像で表示します。
- babu_baboo
- ベストアンサー率51% (268/525)
おおきいゆめをかたられたら、どうしよう？とおもったけど。ばぶ。 function hide() { var c = 0, o, e; while (o = arguments[c++]) (e = document.getElementById(o)) && (e.style.visibility = 'hidden'); }
- babu_baboo
- ベストアンサー率51% (268/525)
ぶちっ。 れいせいに×２＞じぶん ikeike77さんへ ようぼうというか、仕様はほかにないのかなぁ～。ばぶぅ～ ゆめはおおきくかたっておいたほうがよいぞ！ばぶぅ。
補足
ごめんなさいm(__)m 回答No.3に補足説明したのですが、rowspan、colspan混在したテーブルで、 childNodesとかの知識もおぼろげで。。。 要はテーブル中の特定のIDを付けた列だけを非表示にしたいのです。
- think49
- ベストアンサー率59% (285/482)
babu_babooさんの方法が一番スマートですね。 tableの場合、childNodesを使わなくても rows, cells という便利なプロパティがあるようです。 Document Object Model/TABLE http://homepage3.nifty.com/aya_js/dom/dom03.htm # あとは、Firebugでいろいろコードをたたけば解決できるんじゃないでしょうか。
- babu_baboo
- ベストアンサー率51% (268/525)
れんとう、ごめん。 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; } } }
- babu_baboo
- ベストアンサー率51% (268/525)
ていせいします (@v<8) でした。
- babu_baboo
- ベストアンサー率51% (268/525)
ひょうのせるには、.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"> <!-- 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>
- think49
- ベストアンサー率59% (285/482)
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?mode=view&no=2249
- askaaska
- ベストアンサー率35% (1455/4149)
colspanがあろうがなかろうが やることは同じよ。 消したい場合は対象のセルを全て、 表示したい場合も対象のセルを全て style.displayを書き換えるだけ。
お礼
長々お付き合いくださり、ありがとうございました。 ようやく所望のものが出来上がりました。