«

»

How to add zebra striping and highlighting to table rows with jQuery

Intro

A while back, I wrote up an easy way to make your data tables more readable. In that tutorial, I explained how with just a little CSS, you could do two things:

1. Make alternating table rows have different background colors

2. Make each row change color when hovered over.

While that method certainly works just fine, it may be rather time consuming for those who want to add these features to existing tables. To make that work, someone would have to go through the entire table and add classes to each row. While this isn’t so difficult for small tables, it’s nearly impossible for extremely large tables. What if you have a table with 10,000 rows? Do you really want to add a new class to each row? Of course not.

Today, I want to show you how to create this same effect without altering your existing tables of data at all. With just a little CSS and jQuery, you can make any existing table of data more readable with this simple technique.

Demo

Before we begin, let’s first take a look at a demo, which you can find right here. Click on one of the links to turn row highlights on or off. When the highlighting is turned on, try hovering over any one of the rows, and notice how it changes colors. Do you see how much more readable your table is when the row highlighting is turned on?

Okay, now that you understand what we’re doing, let’s explain how it’s done. However, before we begin, you do need to download jQuery, which you can find here at their website.

Explaining the Code

If you take a look at the source code of the demo, you’ll see that there are 3 parts to the page: Some jQuery at the top, a little CSS, and an HTML table. I’m going to explain everything from the bottom up. We’ll start with the HTML table, then get into the CSS, and wrap it up with the jQuery.

HTML
In order to use this technique, your data should be in an HTML table. Here’s one of the rows from the example table:

Code:

<tr>
			<td>100007</td>
			<td>A-1 Cycle City</td>
			<td>Amy Schilling</td>
			<td>United States</td>
			<td>840677</td>
			<td>Lloyd Dunlap</td>
			<td>(626)253-2500</td>
			<td>20000</td>
			<td>15092.17</td>
		</tr>

I’m only showing one row because every row is essentially the same thing. It’s a very basic table, and as you can see, there are no classes attached to any of the rows or cells.

CSS
The CSS contains all the styles we are going to add to the table mentioned above. Let’s quickly run through the styles so you know what each one does:

Code:

	table {border: 1px solid black; padding: 0;}
			
	th {background-color: #969696; color: white; border: 1px solid black; padding: 2px;}
		
	td {padding: 4px; margin: 0;}

These styles only provide formatting for the table and aren’t really important to this demo. They simply give the table a border (1 pixel thick), define formatting for the header row, and add some padding in the table cells.

Moving forward, the next two lines of CSS are quite important to this demo:

Code:

		tr.one {background-color: #dcdcdc;}

		tr.two {background-color: #fcfcfc;}

The first line assigns a light shade of gray (#e0f1ff) to any row with the class name of “one”. The second line assigns an even lighter shade of gray (#f5fbff) to any row with the class name of “two”.

The next two lines of CSS define the hover states for these two rows:

Code:

		tr.one:hover {background-color: #39659a; color: white;}
		
		tr.two:hover {background-color: #39659a; color: white;}

These two lines tell the page that when rows with a class name of “one” or “two” are hovered over, two changes must happen: First, the background color changes to a dark shade of blue (#39659a). Second, the text color changes to white.

Now, you probably noticed that we’ve defined a few classes, but haven’t attached them to any of the table rows. How are we going to apply these styles to the document if they aren’t connected to anything in the table? That’s where the jQuery comes into play.

jQuery
The jQuery portion of the page is where everything comes together. Let’s first take a look at all of the jQuery and then I’ll walk you through each line. Here’s the code:

Code:

<script src="jquery.js"></script>
		<script>
		
		$(document).ready(function() {
		$("a.on").click(function(){	
			$("tr:nth-child(odd)").addClass("two");
			$("tr:nth-child(even)").addClass("one");	
			event.preventDefault();			
			});
			
			$("a.off").click(function(){	
				$("tr:nth-child(odd)").removeClass("two");
				$("tr:nth-child(even)").removeClass("one");	
			});
		});

		</script>

First, you’ll notice that I call the jQuery library with this line:

Code:

<script src="jquery.js"></script>

Obviously, you’ll need to change that to whatever location your jQuery file is stored. Next, we begin the function with this bit of code:

Code:

$(document).ready(function() {

This tells the page to start running this function when the page is loaded.

On the next line, you’ll notice that I’ve added a “click” element:

Code:

$("a.on").click(function(){	

This lines tells the rest of the jQuery code to run only when the link with a class name of “on” is pressed. I’ve added this line so you can turn the highlighting on or off, as you noticed in the demo. However, if you want zebra striping to always be on, this isn’t necessary.

The next two lines tie the styles we mentioned above to the table rows. In short, they activate all of the CSS that we just explained.

Code:

$("tr:nth-child(odd)").addClass("two");
		$("tr:nth-child(even)").addClass("one");	

In plain English, here’s what these lines say: Find all odd table rows (tr) and give them a class name of “two”. Find all the even table rows and give them a class name of “one”. If you remember from above, we already defined the styles for these two classes. This bit of code just assigns the class names to alternating rows…essentially creating the zebra striping effect.

The rest of the code isn’t terribly important to this demo, but I’ll run through it just in case you’re curious. Here’s the next line:

Code:

event.preventDefault();	

This is ensures that the zebra striping will remain in place after I’ve clicked the link to turn it on. If I didn’t place this here, the striping would flash on and then turn off.

The next few lines are only here to turn the zebra striping off:

Code:

$("a.off").click(function(){	
				$("tr:nth-child(odd)").removeClass("two");
				$("tr:nth-child(even)").removeClass("one");	
				});

In short, these lines do the opposite of the previous few. In plain English, here’s what they say: When the link with a class name of “off” is clicked, remove classes “one” and “two” from the table rows. Of course, when those classes are removed, zebra striping is turned off.

Conclusion
In conclusion, we’ve just added zebra striping and row highlighting to an HTML table without altering the table at all. To accomplish this, we first define two table row classes in CSS, along with hover states for both. Then, we use jQuery to assign those classes to alternating rows within the HTML. Simple as pie! This is a great technique for those who want to add zebra striping to existing tables without altering the table itself.

Related Posts:

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>