用javascript隐藏多个表列[重复]

Posted 2023-03-05

【中文标题】用javascript隐藏多个表列[重复]

【英文标题】：Hide multiple table columns with javascript [duplicate]

【发布时间】：2018-04-01 09:31:11

【问题描述】：

我有下面的表格内容，我想在按钮单击时隐藏表格的前十列。请建议在纯 javascript 中隐藏前 5 列的代码。

<table  id="tblMain">
<tr>
<td>00002</td>
<td>1786</td><td>630</td><td>88</td>
<td>1095</td><td>266</td><td>38</td>
<td>659</td><td>364</td><td>49</td>
<td>32</td><td>0</td><td>1</td>
<td>1009</td><td>458</td><td>78</td>
</tr><tr>
<td>00003</td>
<td>1852</td><td>427</td><td>1627</td>
<td>1319</td><td>191</td><td>736</td>
<td>501</td><td>236</td><td>887</td>
<td>32</td><td>0</td><td>4</td>
<td>1375</td><td>418</td><td>1287</td>
    </tr></table>

【问题讨论】：

欢迎来到 Stack Overflow！您似乎在要求某人为您编写一些代码。 Stack Overflow 是一个问答网站，而不是代码编写服务。请see here学习如何写出有效的问题。

【参考方案1】：

我会通过拆分与 JavaScript 的交互并使用 CSS 隐藏来做到这一点。使用<cols>，然后是这样的：

td border: 1px solid #ccc;
.hide td:nth-child(1),
.hide td:nth-child(2),
.hide td:nth-child(3),
.hide td:nth-child(4),
.hide td:nth-child(5),
.hide td:nth-child(6),
.hide td:nth-child(7),
.hide td:nth-child(8),
.hide td:nth-child(9),
.hide td:nth-child(10) display: none;

<table id="tblMain">
  <tr>
    <td>00002</td>
    <td>1786</td>
    <td>630</td>
    <td>88</td>
    <td>1095</td>
    <td>266</td>
    <td>38</td>
    <td>659</td>
    <td>364</td>
    <td>49</td>
    <td>32</td>
    <td>0</td>
    <td>1</td>
    <td>1009</td>
    <td>458</td>
    <td>78</td>
  </tr>
  <tr>
    <td>00003</td>
    <td>1852</td>
    <td>427</td>
    <td>1627</td>
    <td>1319</td>
    <td>191</td>
    <td>736</td>
    <td>501</td>
    <td>236</td>
    <td>887</td>
    <td>32</td>
    <td>0</td>
    <td>4</td>
    <td>1375</td>
    <td>418</td>
    <td>1287</td>
  </tr>
</table>
<button onclick="document.getElementById('tblMain').classList.toggle('hide');">Toggle</button>