JSFiddle - React, Tailwind, and code Playground
HTML
<img id='hide' title='hide' />
<img id='show'>
<table>
<thead>
<tr>
<th class="">C1</th>
<th class="">C2</th>
<th class="">C3</th>
<th class="">C4</th>
<th class="">C5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
CSS
img {
display: inline-block;
width: 10px;
height: 10px;
padding: 10px;
}
img#hide {
background-color: red;
}
img#show {
background-color: green;
}
table td, table th {
border: 1px dotted silver;
padding: 2px;
}
}
JavaScript
$("#hide").live('click', function () {
$("th:eq(2),th:eq(3),th:eq(4),td:eq(2),td:eq(3),td:eq(4)").hide();
});
$("#show").live('click', function () {
$("th:eq(2),th:eq(3),th:eq(4),td:eq(2),td:eq(3),td:eq(4)").show();
});