Hide multiple table columns with javascript

Question

i Have below table with content, and i want to hide first ten columns of table on button click. Please suggest the code to hide first 5 columns in pure 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>

Welcome to Stack Overflow! You seem to be asking for someone to write some code for you. Stack Overflow is a question and answer site, not a code-writing service. Please [see here](http://stackoverflow.com/help/how-to-ask) to learn how to write effective questions. — Rick, Oct 20 '17 at 08:34

score 1 · Accepted Answer · answered Oct 20 '17 at 08:36

I would do it by splitting the interaction with JavaScript and hiding with CSS. Use <cols> and then something like this:

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>

Hide multiple table columns with javascript

1 Answers1