Question

我在下面有内容的表格，我想在按钮点击上隐藏表格的前十列。请建议代码隐藏纯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>

Answer 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>

使用javascript隐藏多个表列

1 个答案: