In this section, we will add color to alternate rows so that we can easily distinguish between the table rows.
You will need a simple HTML table. The table can be written by hand in HTML, or generated by a client-side language, such as PHP. The beauty of the jQuery solution is that it is completely unobtrusive to the markup. Your sample table might look as follows:
Give the table an
idattribute. As a general rule, most elements should have eitheridorclassattributes, and many times both. This will make them easier to be selected via jQuery. For this recipe, give the table anidofplanetsTable,<table id="planetsTable">.Add some rows to the
tbodyas follows:<tr> <td>Mercury</td> <td>1,516 miles (2,440 km)</td> <td>74,800,000 km<sup>2</sup></td> <td>35,980,000 miles (57,910,000 km)</td> <td>No</td> </tr> <tr> <td>Venus</td> <td>3,760 miles (6,052 km)</td> <td>460,200,000 km<sup>2</sup></td> <td>67,240,000 miles (108,200,000 km)</td> <td>No</td> </tr>Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
With the table in place, you can now write the jQuery to perform the row striping as follows:
<script type="text/javascript"> $( document ).ready( function() { $( "#planetsTable tbody tr:even" ).css( "background-color", "#CECECE" ); }); </script>Now when the page is rendered, you should see a nicely striped table as shown in the following screenshot:
This one-liner makes use of jQuery selectors to first find every even row within the tbody of the table with the planetsTable ID. ID values should be unique, so there should be only one.
An id attribute in jQuery is identified with a # character. #planetsTable tells jQuery to select that particular table, but you need to drill further down to get into the table rows.
The next piece of the selector is tbody tr. You've directed jQuery to select the table rows that are inside the tbody of the table with an ID of planetsTable. But you need to drill further down to get every other row.
The selected table rows are part of a collection. Applying the :even selector to the collection returns records whose index is even, starting with 0.
Reading back to front, you've selected every other table row (evens, in this case) that belong to the tbody of the table with the ID of planetsTable.
You have successfully found something. Now, you need to do something.
In this case, you're going to use jQuery's built-in css() method. The css() method, when used as a setter, takes two arguments. First, the CSS property to set, and second, the value to set. In this case, set the background-color property to #ECECEC. This is done via .css( "background-color", "#ECECEC" ).
Putting it all together, you have the following:
$( "#planetsTable tbody tr:even" ).css( "background-color", "#ECECEC" );
As with the :even selector, jQuery also has an :odd selector. They both work the same, so use whichever one looks more appealing to you.
Declaring a style inline, as in the css() method, is a bit of a "code smell". Styles should ideally be defined in classes in a valid <style> block or an external CSS file. With that in mind, let's see the following class declaration:
<style type="text/css">
.trGrey { background-color: #ECECEC; }
</style>.The table row colors can be manipulated with jQuery's built-in addClass() method:
$( "#planetsTable tbody tr:even" ).addClass( "trGrey" );
This allows the CSS, which is a style concern, to be modified without touching the jQuery, which is a code concern.