チェックがついていないチェックボックスの親要素の親要素(=チェックボックスが含まれるtr)を消したいのです
▽1
●
a-kuma3 ●500ポイント ベストアンサー |
2パターン書いてみました。
<html> <script> /* テーブルを一行ずつ見て、一列目のチェックボックスにチェックが 入っていなければ、その行を消す */ function exec1() { var tbl = document.getElementById("target"); for (var r = 0 ; r < tbl.rows.length ; ++r) { var row = tbl.rows[r]; var first_cell = row.cells[0]; var checkbox = first_cell.firstChild; if (checkbox && ! checkbox.checked) { row.style.display = "none"; } } } /* チェックボックスの一覧を手に入れて、チェックが入っていなければ、 自分の二つ上の親を非表示にする。 */ function exec2() { var checks = document.getElementsByTagName("INPUT"); for (var i = 0 ; i < checks.length ; ++i) { if (checks[i].type == "checkbox" && ! checks[i].checked) { checks[i].parentNode.parentNode.style.display = "none"; } } } </script> <body> <button id="btn" onclick="exec1()">実行1</button> <button id="btn" onclick="exec2()">実行2</button> <table id="target" border="1"> <tr> <td><input type="checkbox"></td> <td>abc</td> <td>あいうえお</td> </tr> <tr> <td><input type="checkbox"></td> <td>def</td> <td>かきくけこ</td> </tr> <tr> <td><input type="checkbox"></td> <td>ghi</td> <td>さしすせそ</td> </tr> <tr> <td><input type="checkbox"></td> <td>jkl</td> <td>たちつてと</td> </tr> <tr> <td><input type="checkbox"></td> <td>mno</td> <td>なにぬねの</td> </tr> <tr> <td><input type="checkbox"></td> <td>pqr</td> <td>はひふへほ</td> </tr> <tr> <td><input type="checkbox"></td> <td>stu</td> <td>まみむめも</td> </tr> <tr> <td><input type="checkbox"></td> <td>wxy</td> <td>や ゆ よ</td> </tr> <tr> <td><input type="checkbox"></td> <td>ZZZ</td> <td>らりるれろ</td> </tr> <tr> <td><input type="checkbox"></td> <td>---</td> <td>わ を ん</td> </tr> </tr> </table> </body> </html>
ひとつ目は、テーブルを一行ずつ調べていく方法です。
HTML の書き方によっては firstChild 一発でチェックボックスが取得できない可能性があります。
ふたつ目は、先にチェックボックスの一覧を手に入れる方法です。
対象のテーブルの中以外にもチェックボックス要素がページにあるとしたら、もうちょっと工夫が必要です。