Firtst of all, i'm newbie at javascript/jquery, i found several examples on stackoverflow for hiding column on html table, this is what i need:
hide table columns automatically by checking a checkbox with jQuery
it works on jsfiddle:
http://jsfiddle.net/highwayoflife/8BahZ/4/
But i have no idea, what am i doing wrong, why it's not working for me when i had put it together:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tablazat</title>
<style>
td, th {
padding: 6px;
border: 1px solid black;
}
th {
background-color: #f0eae2;
font-weight: bold;
}
table {
border: 1px solid black;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script language="javascript">
$("input:checkbox:not(:checked)").each(function () {
var column = "table ." + $(this).attr("name");
$(column).hide();
});
$("input:checkbox").click(function () {
var column = "table ." + $(this).attr("name");
$(column).toggle();
});
</script>
</head>
<body>
<p><input type="checkbox" name="first_name" checked="checked" /> First Name</p>
<p><input type="checkbox" name="last_name" /> Last Name</p>
<p><input type="checkbox" name="email" checked="checked" /> Email</p>
<table id="report">
<thead>
<tr>
<th class="first_name">First Name</th>
<th class="last_name">Last Name</th>
<th class="email">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first_name">Larry</td>
<td class="last_name">Hughes</td>
<td class="email">larry@gmail.com</td>
</tr>
<tr>
<td class="first_name">Mike</td>
<td class="last_name">Tyson</td>
<td class="email">mike@gmail.com</td>
</tr>
</tbody>
</table>
</body>
Any help is appreciated: please try to explain it as simple as it is possible, like i wrote. Thanks in advance!
You need to wrap your code in a $(document).ready block, or else move it to the bottom of the page, since those checkboxes don't exist yet:
<script language="javascript">
$(document).ready(function() {
$("input:checkbox:not(:checked)").each(function () {
var column = "table ." + $(this).attr("name");
$(column).hide();
});
$("input:checkbox").click(function () {
var column = "table ." + $(this).attr("name");
$(column).toggle();
});
});
</script>
in jsFiddle, the second dropdown in the upper-left corner is usually set to "onLoad", which triggers this behavior automatically.