Trapped in Hoth: Jquery Basic Example: Highlighting Table Rows

Monday, July 14, 2008

Jquery Basic Example: Highlighting Table Rows

This is pulled pretty much directly from the second tutorial on Jquery's site. With big data grids sometimes adding a row highlighter allows users to keep track of where they reading in the table. I've been doing this type of stuff with javascript for a long time, but JQuery just made this technique uber simple. Here is an example. Note, some of the code might slide under the right side bar, just copy and past the whole code block and it will get the covered code if you are interested. Also you will need to adjust the link at the top to where your jquery code resides. Now the code-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script src="../s/jquery-1.2.6.pack.js" type="text/javascript"></script>
    <style type="text/css">
       .hl {color:red; background-color:yellow}
    </style>
</head>
<body>
<p>
  Low Cost Table Row Hover Event
</p>
 <table id="test" cellpadding="2" cellspacing="0" border="0"
  bgcolor="#f5f5f5">
 <tr><td>stuff</td><td>stuff</td></tr>
 <tr><td>stuff</td><td>stuff</td></tr>
 <tr><td>stuff</td><td>stuff</td></tr>
 <tr><td>stuff</td><td>stuff</td></tr>
 <tr><td>stuff</td><td>stuff</td></tr>
 <tr><td>stuff</td><td>stuff</td></tr>
 <tr><td>stuff</td><td>stuff</td></tr>
 </table>
<script language="javascript" type="text/javascript">
  $(document).ready(function() {
   $("#test tr").hover(function() {
     $(this).addClass("hl");
   },function(){
     $(this).removeClass("hl");
   });
 });
</script>
</body>
</html>

1 comment:

Anonymous said...: quick and simple...love it! thanks!; 3:42 PM