JS forループを用いずに列の表示制御

質問

JavaScript forループを用いずに列の表示制御

スキルアップのための問題を作りました。

チェックボックスと表があります。
次の仕様に基づいた処理を JavaScriptでできますか？
できるだけ簡潔なコードの回答をお待ちします。

＜仕様＞
・初めはすべての列を表示にしておく
・チェックアウトしたら、その列を非表示にする
・チェックインしたら、再び表示させる
・jQuery等のプラグインは用いないこと
・「forループ」は用いないこと　(ここがポイント)

＜HTML＞
<form>
チェックアウトで列を非表示：
<label><input name="check" type="checkbox">列１</label>
<label><input name="check" type="checkbox">列２</label>
<label><input name="check" type="checkbox">列３</label>
<label><input name="check" type="checkbox">列４</label>
<label><input name="check" type="checkbox">列５</label>
</form>

<table>
<thead>
<tr>
<th></th>
<th>列 1</th>
<th>列 2</th>
<th>列 3</th>
<th>列 4</th>
<th>列 5</th>
</tr>
</thead>
<tbody>
<tr>
<th>行 1</th>
<td>cell1-1</td>
<td>cell1-2</td>
<td>cell1-3</td>
<td>cell1-4</td>
<td>cell1-5</td>
</tr>
<tr>
<th>行 2</th>
<td>cell2-1</td>
<td>cell2-2</td>
<td>cell2-3</td>
<td>cell2-4</td>
<td>cell2-5</td>
</tr>
<tr>
<th>行 3</th>
<td>cell3-1</td>
<td>cell3-2</td>
<td>cell3-3</td>
<td>cell3-4</td>
<td>cell3-5</td>
</tr>
<tr>
<th>行 4</th>
<td>cell4-1</td>
<td>cell4-2</td>
<td>cell4-3</td>
<td>cell4-4</td>
<td>cell4-5</td>
</tr>
<tr>
<th>行 5</th>
<td>cell5-1</td>
<td>cell5-2</td>
<td>cell5-3</td>
<td>cell5-4</td>
<td>cell5-5</td>
</tr>
</tbody>
</table>

回答No.2

LC-500

checkbox の意味が逆だと思いますが・・・

table.hd1 tr>*:nth-child(2),
table.hd2 tr>*:nth-child(3),
table.hd3 tr>*:nth-child(4),
table.hd4 tr>*:nth-child(5),
table.hd5 tr>*:nth-child(6)
{
display:none;
}

//__

let
[...chks] = document.querySelectorAll('form label input[name="check"]'),
tb = document.querySelector ('table');

function eh (evt) {
let
e = evt.target,
n = chks.indexOf (e);

if (-1 < n) {
tb.classList.toggle (`hd${n+1}`);
}
}

document.forms[0].addEventListener ('click', eh, false);

お礼

ご回答ありがとうございます。

Powered by GRATICA

補足

のっけから以下のエラーが出ました。
Uncaught SyntaxError: Unexpected identifier 'tr' (at test.html

チェックボックスのデフォルト設定では未チェックなので、
まず、すべてにチェックを入れるだけの処理が必要ですね。

回答No.1

luka3

チェックボックス
<label><input name="check" type="checkbox" onchange="toggleColumn(this, 1)" checked>列１</label>
<label><input name="check" type="checkbox" onchange="toggleColumn(this, 2)" checked>列２</label>
　以下同様

コード
function toggleColumn(checkbox, columnIndex) {
const table = document.querySelector('table');
table.rows[0].cells[columnIndex].style.display = checkbox.checked? '':'none'; // ヘッダー
table.rows[1].cells[columnIndex].style.display = checkbox.checked? '':'none';
table.rows[2].cells[columnIndex].style.display = checkbox.checked? '':'none';
table.rows[3].cells[columnIndex].style.display = checkbox.checked? '':'none';
table.rows[4].cells[columnIndex].style.display = checkbox.checked? '':'none';
table.rows[5].cells[columnIndex].style.display = checkbox.checked? '':'none';
}

お礼

ご回答ありがとうございます。

Powered by GRATICA

補足

「table.rows[0]～」 のステートメントは無用です。