Question

求JS隐藏与显示表格多条整列

<table>
<thead>
<tr>
<th>列一</th>
<th>列二</th>隐藏
<th>列三</th>隐藏
<th>列四</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>隐藏
<td>Data3</td>隐藏
<td>Data4</td>
</tr>
<tr>
<td>Data5</td>
<td>Data6</td>隐藏
<td>Data7</td>隐藏
<td>Data8</td>
</tr>
<tr>
<td>Data9</td>
<td>Data10</td>隐藏
<td>Data11</td>隐藏
<td>Data12</td>
</tr>
</tbody>
</table>

<button>显示隐藏</button>点此显示第二列和第三列

JS实现点击按钮就可以显示与隐藏表格中的第二列和第三列

Answer 1

我默认你用的不是古代的浏览器，代码都按现代浏览器的写

let isHidden = false;
document.querySelector("button").addEventListener("click", () => {
    //css选择器选择table下所有tr下的所有第2，3个td。
    document.querySelectorAll("table tr td:nth-child(2), table tr td:nth-child(3)").forEach(item => {
        e.style.visibility = isHidden ? "visible" : "hidden";
        isHidden = !isHidden;
    });
}, false);