Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

jQuery - Table Features in the Core jQuery Library

Last Update: 9.07.2008

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 group 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.


Looking for more?

Back to Pew Pew Laser Articles

Contact Me