Table filtering in jquery - a more elegant solution please
I want to filter certain rows out of a table and am using classes to categorize the rows.
The below code enables me to show and hide row data categorized 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_a开发者_开发技巧c_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>
You can reduce your code (without changing markup) down to this:
$("[id^='toggle_'").click(function() {
$("." + this.id.replace('toggle_','')).toggle(this.checked);
});
Though, if you gave your toggle elements a class instead, like .toggle you can clean up the original selector, like this:
$(".toggle").click(function() {
$("." + this.id.replace('toggle_','')).toggle(this.checked);
});
You could also give them a class and use the value as the target class, like this:
<input type="checkbox" class="toggle" value="ac_cal" />
Then your jQuery is just this, short and simple:
$(".toggle").click(function() {
$("." + this.value).toggle(this.checked);
});
You could give your clickable elements (buttons? whatever they are) two classes: "toggler" and then something like "target:ac_cal" or "target:ac_quo". Then, you can assign the same handler to all of them:
$('.toggler').click(function() {
var target = this.className.replace(/target:(\w*)/, "$1");
$('.' + target)[this.checked ? "show" : "hide"]();
});
What that does is pluck the class name of the intended target of the "toggler" button out of the toggler's own class string. Then it calls either "show" or "hide" on the affected targets.
edit — oh durr, I scrolled down to find your checkboxes :-) So those would look like this:
<input type="checkbox" id="toggle_ac_cal" checked="checked" class='toggler target:ac_cal'/>CAL<br/>
<input type="checkbox" id="toggle_ac_quo" checked="checked" class='toggler target:ac_quo'/>QUO<br/>
Try this (demo):
HTML (the id should match the classes in the table):
<input type="checkbox" id="ac_cal" checked="checked" />CAL<br/>
<input type="checkbox" id="ac_quo" checked="checked" />QUO<br/>
Script:
$(document).ready(function () {
$("input[id^=ac]").click(function()
{
$('tr.' + this.id)[this.checked ? "show" : "hide"]();
})
});
加载中,请稍侯......
精彩评论