show only those columns of tables whose checkbox is checked
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.
vineet
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
</head>
<body>
<table border="1" cellpadding="5">
<tr>
<td class="Col1">Col 1</td>
<td class="Col2">Col 2</td>
<td class="Col3">Col 3</td>
</tr>
<tr>
<td class="Col1">text 1</td>
<td class="Col2">text 2</td>
<td class="Col3">text 3</td>
</tr>
</table>
<br />
<table>
<tr>
<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>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('input:checkbox').change(function(){
var col_name = $(this).attr("name");
if(this.checked){
$("td[class='" + col_name + "']").show();
}else{
$("td[class='" + col_name + "']").hide();
}
});
</script>
</body>
</html>
