View Full Version : show only those columns of tables whose checkbox is checked

11-07-2016, 12:01 PM
hi all

this below code has 3 checkboxes.

these 3 checkboxes toggle hide/show table columns.

on page load i want to show only those columns of tables whose checkbox is checked.

if checkbox is not checked then i want to hide that column of table.

2nd checkbox is unchecked, so 2nd column of table should hide on page load by default.


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<table border="1" cellpadding="5">
<td class="Col1">Col 1</td>
<td class="Col2">Col 2</td>
<td class="Col3">Col 3</td>
<td class="Col1">text 1</td>
<td class="Col2">text 2</td>
<td class="Col3">text 3</td>

<br />

<td><input name="Col1" type="checkbox" checked="checked" /></td>
<td><input name="Col2" type="checkbox" style="margin-left:35px" /></td>
<td><input name="Col3" type="checkbox" checked="checked" style="margin-left:35px" /></td>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
var col_name = $(this).attr("name");
$("td[class='" + col_name + "']").show();
$("td[class='" + col_name + "']").hide();