PDA

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



vinpkl
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.

vineet



<!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>