jQuery - Core Table Functionality
Introduction
This article demonstrates functions related to tables that are included with the core jQuery library. This JavaScript library is accessible, standards friendly, and dead simple to implement.
Demonstration
Here's a table - the alternating row colors and the "hover row" (the yellow highlighting on the row the mouse cursor) effects are added with the help of jQuery.
| Customer | Date | City | Store ID | Amount |
|---|---|---|---|---|
| ASH (A) | 5/03/2006 | Bellvue | 16 | -2250539.51 |
| BARBUR (B) | 7/26/2004 | Portland | 13 | -206012.91 |
| COUCH (C) | 07/04/2006 | Seattle | 23 | -462118.45 |
| DIVISION (D) | 07/11/2006 | Tacoma | 12 | -561203.32 |
| FLANDERS (NE) | 09/22/2004 | Centralia | 24 | -428710.00 |
| HOLGATE (H) | 12/2/2005 | Bellvue | 11 | -592496.15 |
| BURNSIDE (B) | 09/14/2004 | Portland | 17 | 600.64 |
| LOMBARD (L) | 08/19/2005 | Tacoma | 29 | 9.10 |
| ASH (A) | 5/09/2006 | Bellvue | 9 | 99.01 |
| BARBUR (B) | 12/26/2005 | Portland | 13 | 900 |
| COUCH (C) | 04/01/2005 | Seattle | 19 | -9 |
| HAWTHORNE (H) | 02/13/2006 | Tacoma | 12 | -99 |
| FLANDERS (NE) | 06/22/2004 | Centralia | 21 | -999 |
| HOLGATE (H) | 11/17/2005 | Bellvue | 26 | 6.00 |
| KLICKITAT (K) | 05/29/2005 | Portland | 8 | 99.63 |
| LOMBARD (L) | 07/31/2005 | Tacoma | 27 | 12.00 |
| ASH (A) | 6/03/2006 | Bellvue | 18 | 0 |
| BARBUR (B) | 6/26/2006 | Portland | 15 | 8 |
| COUCH (C) | 04/01/2006 | Seattle | 25 | .50 |
| DIVISION (D) | 08/13/2006 | Tacoma | 03 | 9 |
| FLANDERS (NE) | 09/18/2004 | Centralia | 22 | -30 |
| HOLGATE (H) | 11/15/2005 | Bellvue | 28 | 9000 |
| KLICKITAT (K) | 06/19/2006 | Portland | 7 | 60 |
| SANDY (S) | 07/31/2005 | Tacoma | 30 | 12 |
Code
This simple table doesn't contain much fancy mark-up. There's just a simple <thead> around the header row, and bunch of regular <tr>s and <td>s. Here's a snippet of the XHTML for the table:
<table class="sortable">
<thead>
<tr>
<th>Customer</th>
<th>Date</th>
<th>City</th>
<th>Store ID</th>
<th>Amount</th>
</tr>
</thead>
<tr>
<td>ASH (A)</td>
<td>5/03/2006</td>
<td>Bellvue</td>
<td>16</td>
<td>-2250539.51</td>
</tr>
<tr>
<td>BARBUR (B)</td>
<td>7/26/2004</td>
<td>Portland</td>
<td>13</td>
<td>-206012.91</td>
</tr>
...
</table>
Though all of these styles are defined in the CSS, some of them are applied with JavaScript. Here's the CSS:
<style type="text/css">
table.sortable
{ margin-left: auto;
margin-right: auto;
border: 1px solid #000000;
background-color: #FFFFFF;
border-collapse: collapse;
font-size: 80%;
color: #000000;
}
table.sortable td, table.sortable th
{ border: 1px solid #000000;
padding: 3px;
}
table.sortable th
{ font-size: 110%;
font-weight: 600;
color: #FFFFFF;
background-color: #3E577B;
}
tr.alt
{ background-color: #e0e0e0;
}
tr.over td
{ background-color:#FFFF99;
}
</style>
jQuery Code
The jQuery calls to add the alternate row coloring and hover-row are quite simple. The first line groups all of the other commands inside a "when the DOM is ready" command.
$(document).ready(function(){
$(".sortable th").addClass("sort_header");
$(".sortable tr:even").addClass("alt");
$(".sortable tr").mouseover(function(){
$(this).addClass("over");
});
$(".sortable tr").mouseout(function(){
$(this).removeClass("over");
});
});
The second line selects all <th>s that are inside something with a class of "sortable", and adds the "sort_header" class to them.
The third line selects only even <tr>s, and adds the "alt" class to them.
The next group of lines (4, 5, and 6) select any <tr>s inside something with a class of "sortable", and, when the mouse is over them, adds the "over" class to them.
The next roup of lines (7, 8, and 9) removes the over class from those <tr>s when the cursor moves away.
The last group simply closes the document.ready function.
Browser Modifications?
I have tested this in Firefox 3, Internet Explorer 7, Internet Explorer 6 and Safari 3 - everything works great with no modifications. Part of the magic of using a library like jQuery is that someone else generally takes care of the cross browser compatibility issues.