We help IT Professionals succeed at work.

Table filtering in jquery - a more elegant solution please

neburton
neburton asked
on
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>

Open in new window

Comment
Watch Question

View Solution Only

Albert Van HalenAnalyst developer

Commented:
Bind click event to each checkbox.
Replace "toggle_" within the id to get the classname for the rows.
Hide or show them according to checked state of the checkbox...

<!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 () {
		$("input:checkbox").click(function() {				
			var classToShow = this.id.replace("toggle_", "");
			// Show all rows first
			if(this.checked)
				$("." + classToShow).show();
			else
				$("." + classToShow).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 id="data">
<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>

Open in new window

Commented:
If you are happy with all the rows being visible to begin, this approach is very clean.
<!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" >
	<title>Untitled Page</title>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

		<style type="text/css">

		</style>

  </head>

<body>
	<input type="checkbox" id="toggle" rel="ac_cal" checked="checked" />CAL<br/>
	<input type="checkbox" id="toggle" rel="ac_quo" checked="checked" />QUO<br/>
	<table id="data">
		<tr>
			<th>Category</th>
			<th>Date</th>
			<th>Contact</th>
		</tr>
		<tr class="ac_cal">
			<td>CAL</td>
			<td>10 Oct</td>
			<td>John Barnes</td>
		</tr>
		<tr class="ac_quo">
			<td>QUO</td>
			<td>11 Oct</td>
			<td>Neil Armstrong</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>
		<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>John Barnes</td>
		</tr>
		<tr class="ac_quo">
			<td>QUO</td>
			<td>11 Oct</td>
			<td>Neil Armstrong</td>
		</tr>
	</table>


	<script>

		$(document).ready(function(){
			$("input[type=checkbox]").click(function(){
				$("tr." + $(this).attr("rel")).toggle();
			});
		});
	</script>

</body>
</html>

Open in new window

Albert Van HalenAnalyst developer

Commented:
Clean or not : rel is not a valid atribute and the id 'toggle' is used twice in this case.
Use classes and skip ids or use unique ids...
Steve Krile

Commented:
ID used twice is a typo and likely assigned by whatever server-side code is available.  Rel is not invalid.  Perfectly fine for any xhtml attribute.