jQuery – Manipulating Table Row Background Colors (The Sequel)

jQuery / Programming

Yesterday we looked at using jQuery to manipulate table row background colors based on a specific set of criteria. It was a relatively straightforward effort as we simply referenced a particular class name. However, sometimes we don’t have total control over the markup, and will need to rely on our ability to traverse the DOM.

Given the table below, allow the user to see which items are marked down by 50% or more.

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

Since the <td> elements no longer have class attributes, we’ll need to use jQuery to traverse the DOM down to the elements we’re interested in (in this case, Original Price and Sale Price columns).

<script type="text/javascript">
	$(document).ready(function() {
		$('#halfoff').click(function() {
			$('#inventoryTable tbody tr').each(function() {
				var reg  = $(this).children(':eq(0)').text();
				var sale = $(this).children(':eq(1)').text();

				if (reg/sale > 2)
					$(this).css('backgroundColor', '#EFEF00');
			});
		});
	});
</script>

Add the following button:

<input type="button" value="Items 50% off" id="halfoff" />

As with yesterday’s example, the button (with id “halfoff” in this case) will trigger our jQuery function. Our selector is:

$('#inventoryTable tbody tr')

So we start with the element that has id=”inventoryTable”, and using an ancestor descendent convention, navigate to that element’s <tbody>, and further down to any subsequent <tr> elements. For each <tr> found, do the following:

  • Set a variable for the regular price, by traversing to the first child element of the current <tr> (remember, JavaScript, and by extension, jQuery, start counting at 0, not 1).
  • Get the value of the text within that element (text() was used in yesterday’s entry as well).
  • Repeat the above steps for the 2nd child element, which holds the sale price.
  • If regular price divided by sale price is greater than 2 (e.g. the sale price is 50% off or more), set the background-color of the current element (the <tr>) using jQuery’s css() method. See yesterday’s entry for an explanation of .css() as well as an important note about the JavaScript naming convention behind backgroundColor.

Putting it all together (and remember, since the code references Google to get a hook into jQuery, you can copy/paste and run this example on your own machine):

<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; }
		input[type='button']			{ width:115px; }
	</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() {
			$('#halfoff').click(function() {
				$('#inventoryTable tbody tr').each(function() {
					var reg  = $(this).children(':eq(0)').text();
					var sale = $(this).children(':eq(1)').text();

					if (reg/sale > 2)
						$(this).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>100.00</td>
	<td>65.00</td>
	<td>Green widget (Yellow stripes)</td>
</tr>
<tr>
	<td>200.00</td>
	<td>110.00</td>
	<td>Lavender Widget (White dots)</td>
</tr>
<tr>
	<td>200.00</td>
	<td>74.00</td>
	<td>Red Widget (Solid)</td>
</tr>
</tbody>
</table>

<div id="buttons">
	<input type="button" value="Items 50% off" id="halfoff" />
</div>

</body>
</html>

Tomorrow we’re going to combine today’s entry with yesterday’s, and add a method to clear the background colors that were triggered via our buttons.

jQuery concepts used:

| 0 comments