javascript 列を非表示にしたい

質問

このようなテーブルを作成して「C1」の「列を隠す」をクリックした時に「C1」以外のAとB列のみ表示させたいのですが、教えていただけないでしょうか。なお、表の幅は変えないままで表現したいと思ってます。

<table border="0">
<tr>
<td width="48">A1</td>
<td width="48">B1</td>
<td width="48">C1</td>
</tr>
<tr>
<td>列を隠す</td>
<td>列を隠す</td>
<td>列を隠す</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</table>

回答No.1

notnot · ベストアンサー

対象のtableにid="tbl1"とか付けておいて、３列目を隠すボタンには
<button onclick="hide(2)">
として、スクリプトとしては、こんな感じで。

function hide(n){
var tbl=document.getElementById("tbl1");
var trs=tbl.getElementsByTagName("tr");
for(var i=0; i<trs.length; ++i){
var tds=trs[i].getElementsByTagName("td");
tds[n].style.display = "none";
}}

お礼

ありがとうございました。すごく参考になりましたし、雰囲気がでてきました。
多少アレンジしながらもう少し事を進めてみたいと思。
コメントに感謝します。