javascriptでtableの列tdを非表示(.display="none")にするには

これもまぁ備忘録なんですけど

tdのstyle要素にアクセスする時に「.style.display = "none";」がエラーするなぁと休みの日の午前中を丸つぶしした問題

var tbl=document.getElementById("tablename");

var trs=tbl.getElementsByTagName("tr");

for(var i=0; i<trs.length; ++i){

trs[i].getElementsByTagName("td").style.display = "none";

}

ではなく

var tbl=document.getElementById("tablename");

var trs=tbl.getElementsByTagName("tr");

for(var i=0; i<trs.length; ++i){

trs[i].cells[n].style.display="none"

}

で、OK。

TR要素のcells要素から非表示できる。

javascriptでtableのtr表示非表示を崩れさせず切り替える方法

今後も詰まる人がいるだろうし、備忘録として

今回はtrタグにidを仕込んであります。

答えから

ck=document.getElementsByName("ck1")

row=document.getElementById("c"+(i+1));

if(ck[i].checked){

row.style.display="";

}else{

row.style.display="none";

}

たいていの要素は「display: block;」と「display: none;」切り替えですがこれをtableで行うとバグります。

blockは一つのブロック要素になって戻るので挙動的には

<tr>[戻した内容が一括り]</tr>

の様になり、見た目は戻した要素が一つ目のtdタグに詰め込まれる様になります。

・tableには初期値があり

table要素 display: table

thead要素 display: table-header-group

tbody要素 display: table-row-group;

tr　要素 display: table-row;

th　要素 display: table-cell;

td　要素 display: table-cell;

tfoot要素 display: table-footer-group;

戻す場合はこれらの初期値に戻せば正しく戻ります。

・・・で、横着した結果ですが「display="";」です。

こうする事で崩れず戻す事が可能です。