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="";」です。

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