JavaScriptで<Table>の各列の表示状態を動的に切り替える
ロゴ
「Web 開発」に関連する記事一覧

JavaScriptで<Table>の各列の表示状態を動的に切り替える

2018/11/11
jQuery JavaScript HTML 

テーブル列の動的表示オンオフの画像

HTML のテーブル(<Table> 要素)の列の表示をチェックボックスの切り替えで動的にオン、オフする方法をメモしておきます。

最初に結果を載せておきます。

ID First Last
ID First Last
1 John Doe
2 Jane Doe
3 Foo Bar
2 Jain Bar

以下がこのテーブルのHTMLとJavaScriptのソースです。jQuery を利用しています。checkbox の onclick で呼んでいる updateColumnVisibility() 関数で各列ごとの表示状態を更新しています。


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<div style='text-align:center'>
    <form id="checkboxForm">
        <input type="checkbox" name="columnCheckboxes" onclick="updateColumnVisibility();" checked="true">ID
        <input type="checkbox" name="columnCheckboxes" onclick="updateColumnVisibility();" checked="true">First
        <input type="checkbox" name="columnCheckboxes" onclick="updateColumnVisibility();" checked="true">Last
    </form>
</div>
<div id="myTable">
    <table align='center'>
        <tr>
            <th>ID</th>
            <th>First</th>
            <th>Last</th>
        </tr>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Doe</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jane</td>
            <td>Doe</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Foo</td>
            <td>Bar</td>
        </tr>
        <tr class="even">
            <td>2</td>
            <td>Jain</td>
            <td>Bar</td>
        </tr>
    </table>
</div>
<script>
function updateColumnVisibility() {
    var form = document.getElementById('checkboxForm');
    for (var i = 0; i < form.columnCheckboxes.length; ++i) {
        var checkbox = form.columnCheckboxes[i];
        if (checkbox.checked) {
            $('#myTable tr > *:nth-child(' + (i + 1) + ')').show();
        }
        else {
            $('#myTable tr > *:nth-child(' + (i + 1) + ')').hide();
        }
    }
}
</script>


    このエントリーをはてなブックマークに追加    

関連記事

にほんブログ村 ゲームブログ ファイアーエムブレムへ にほんブログ村 デザインブログ コンピュータグラフィックスへ

0.0633 sec
Copyright(C)2006-2018 wsp All Rights Reserved