jQuery – Manipulating Table Row Background Colors

Given the table below, allow the user to see which items are under $100

<table id="inventoryTable" cellpadding="3" cellspacing="0">
<thead>
<tr>
	<td>Original Price</td>
	<td>Sale Price</td>
	<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
	<td class="originalPrice">100.00</td>
	<td class="salePrice">65.00</td>
	<td>Green widget (Yellow stripes)</td>
</tr>
<tr>
	<td class="originalPrice">200.00</td>
	<td class="salePrice">110.00</td>
	<td>Lavender Widget (White dots)</td>
</tr>
<tr>
	<td class="originalPrice">200.00</td>
	<td class="salePrice">74.00</td>
	<td>Red Widget (Solid)</td>
</tr>
</tbody>
</table>

Since each <td> displaying the “Sale Price” has a class name, we can easily implement a jQuery selector to be executed on the click of a button with id=”cheapstuff”.

<script type="text/javascript">
	$(document).ready(function() {
		$('#cheapstuff').click(function() {
			$('.salePrice').each(function() {
				if ($(this).text() < 100)
				$(this).parent().css('backgroundColor', '#EFEF00');
			});
		});
	});
</script>

Add the following button:

<input type="button" value="Items Under $100" id="cheapstuff" />

When the button is clicked, the jQuery function will find all elements with class name “salePrice”, and iterate over the results (using the built-in jQuery each() method).

Within each loop iteration, $(this) refers to the current element with class name “salePrice”. text() is a built-in jQuery method that can either get or set the value of the text within the element. If no argument (string) is passed in, it is a getter method. If an argument is passed in (e.g. text(‘New text here’)), the text inside the element will be set to the string passed in.

If the value retrieved is less than 100, use the parent() method to traverse to the <tr> holding the current <td> element being evaluated, and use the built-in css() method to manipulate the background-color, setting it to a specified value (in this case, #EFEF00).

Note that the css declaration for background color is “background-color” with a dash. In JavaScript, element references do not use the dash convention. This is not unique or specific to jQuery. It’s a JavaScript convention. A reference that uses a dash will drop the dash and use camelCase notation. So background-color becomes backgroundColor. margin-top becomes marginTop. And so on.

Putting it all together:

<html>
<head>
	<title></title>

	<style type="text/css">
		#inventoryTable			{ margin:0 0 12px 0; }
		#inventoryTable thead td	{ border-bottom:1px solid black; font-weight:bold; }
	</style>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#cheapstuff').click(function() {
				$('.salePrice').each(function() {
					if ($(this).text() < 100)
					$(this).parent().css('backgroundColor', '#EFEF00');
				});
			});
		});
	</script>
</head>

<body>

<table id="inventoryTable" cellpadding="3" cellspacing="0">
<thead>
<tr>
	<td>Original Price</td>
	<td>Sale Price</td>
	<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
	<td class="originalPrice">100.00</td>
	<td class="salePrice">65.00</td>
	<td>Green widget (Yellow stripes)</td>
</tr>
<tr>
	<td class="originalPrice">200.00</td>
	<td class="salePrice">110.00</td>
	<td>Lavender Widget (White dots)</td>
</tr>
<tr>
	<td class="originalPrice">200.00</td>
	<td class="salePrice">74.00</td>
	<td>Red Widget (Solid)</td>
</tr>
</tbody>
</table>

<div id="buttons">
	<input type="button" value="Items Under $100" id="cheapstuff" />
</div>

</body>
</html>

We’re going to expand a bit on this example in the next two entries. But for now, you can successfully highlight a table row that matches specified criteria.

jQuery concepts used: