javascriptで複数の表の列を非表示にする

Question

i次の表に内容があります。ボタンのクリックで表の最初の10列を非表示にします。純粋な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>