Table filtering in jquery - a more elegant solution please
Posted
by Neil Burton
on Stack Overflow
See other posts from Stack Overflow
or by Neil Burton
Published on 2010-06-13T20:19:11Z
Indexed on
2010/06/13
20:22 UTC
Read the original article
Hit count: 389
jQuery
I want to filter certain rows out of a table and am using classes to categorise the rows.
The below code enables me to show and hide row data categorised as "QUO" and "CAL" (eventually there will be other categories.
Can someone point me towards a more elegant solution, so I don't have to duplicate code for each category as I have below?
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Untitled</title>
<style>
</style>
<script src="Javascript/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#toggle_ac_cal").click(function()
{
var checked_status = this.checked;
if (checked_status==true)
{
$(".ac_cal").show()
}
else
{
$(".ac_cal").hide()
}
});
$("#toggle_ac_quo").click(function()
{
var checked_status = this.checked;
if (checked_status==true)
{
$(".ac_quo").show()
}
else
{
$(".ac_quo").hide()
}
});
});
</script>
</head>
<body>
<input type="checkbox" id="toggle_ac_cal" checked="checked" />CAL<br/>
<input type="checkbox" id="toggle_ac_quo" checked="checked" />QUO<br/>
<table>
<tbody>
<tr class="ac_cal">
<td>CAL</td>
<td>10 Oct</td>
<td>John Barnes</td>
</tr>
<tr class="ac_cal">
<td>CAL</td>
<td>10 Oct</td>
<td>Neil Burton</td>
</tr>
<tr class="ac_quo">
<td>QUO</td>
<td>11 Oct</td>
<td>Neil Armstrong</td>
</tr>
</tbody>
</table>
</body>
</html>
© Stack Overflow or respective owner
