使用javascript隐藏多个表列

我有下面的内容表，并且我想隐藏前十个按钮点击表的列。请建议将代码隐藏在纯JavaScript中的前5列。使用javascript隐藏多个表列

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

来源

2017-10-20 erdeepak

欢迎堆栈溢出！你似乎在要求某人为你写一些代码。堆栈溢出是一个问答网站，而不是代码写入服务。请[see here]（http://stackoverflow.com/help/how-to-ask）学习如何编写有效的问题。 –

我会通过与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>

来源

2017-10-20 08:36:34 Soolie

使用javascript隐藏多个表列

回答

相关问题