HTML のテーブル(<Table> 要素)の列の表示をチェックボックスの切り替えで動的にオン、オフする方法をメモしておきます。
最初に結果を載せておきます。
| 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>
