Table filtering in jquery - a more elegant solution please
- by Neil Burton
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>
