javascriptの質問です

テーブルは複数列で1列目にチェックボックスが入っています
チェックがついた行だけ残したいのですが
どのようなjavascriptを組めばよろしいでしょうか?
よろしくお願いします

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/01/09 07:39:32
  • 終了:2014/01/12 03:28:15
id:takanii

チェックがついていないチェックボックスの親要素の親要素(=チェックボックスが含まれるtr)を消したいのです

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4583ベストアンサー獲得回数19232014/01/09 09:10:41

ポイント500pt

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 一発でチェックボックスが取得できない可能性があります。

ふたつ目は、先にチェックボックスの一覧を手に入れる方法です。
対象のテーブルの中以外にもチェックボックス要素がページにあるとしたら、もうちょっと工夫が必要です。

その他の回答(0件)

id:a-kuma3 No.1

a-kuma3回答回数4583ベストアンサー獲得回数19232014/01/09 09:10:41ここでベストアンサー

ポイント500pt

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 一発でチェックボックスが取得できない可能性があります。

ふたつ目は、先にチェックボックスの一覧を手に入れる方法です。
対象のテーブルの中以外にもチェックボックス要素がページにあるとしたら、もうちょっと工夫が必要です。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません