Alternate colors to table rows with javascript (YUI)

This article will show you how to add alternate colors to table rows without any server side development or hard coding your scripts, thus providing good readability for your users and great flexibility for you. We will use the YUI library for that.

The HTML

We need to create our basic HTML file containing a table and adding a class name to it.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Alternate colors</title>
	</head>
	<body>
		<table class="alternateRows">
			<tr>
				<td>First Row</td>
			</tr>
			<tr>
				<td>Second Row</td>
			</tr>
			<tr>
				<td>Third Row</td>
			</tr>
			<tr>
				<td>Fourth Row</td>
			</tr>
			<tr>
				<td>Fifth Row</td>
			</tr>
		</table>
	</body>
</html>

The Javascript

Next we need to include the YUI libraries, served from their CDN. We need the

  • YAHOO global object which contains a number of methods that are used throughout the library
  • DOM collection which provides methods that simplify common DOM-scripting tasks, including element positioning and CSS style management
  • Event utility for various event handling
<!-- Combo-handled YUI JS files: --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

And also our javascript file, alternate.js

<script type="text/javascript" src="alternate.js"></script>

So our HTML page looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<!-- Combo-handled YUI JS files: --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
		<script type="text/javascript" src="alternate.js"></script>
		<title>Alternate colors</title>
	</head>
	<body>
		<table class="alternateRows">
			<tr>
				<td>First Row</td>
			</tr>
			<tr>
				<td>Second Row</td>
			</tr>
			<tr>
				<td>Third Row</td>
			</tr>
			<tr>
				<td>Fourth Row</td>
			</tr>
			<tr>
				<td>Fifth Row</td>
			</tr>
		</table>
	</body>
</html>

Invoking the javascript

To add the alternate colors to your table rows, you just have to put the following javascript code in your HTML page.

	YAHOO.util.Event.on(window, 'load', function(){
		YAHOO.htmlblog.alternateRows.init('alternateRows', '#fff', '#ccc');
	});

That means that after the page has been loaded, we call the alternateRows.init function, with 3 parameters:

  • the table class name, in our case it’s “alternateRows”
  • the first color in hex, e.g #fff
  • the second color in hex, e.g #ccc

Our complete HTML page

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<!-- Combo-handled YUI JS files: --> 
<script type="text/javascript"src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
		<script type="text/javascript" src="alternate.js"></script>
		<script type="text/javascript">
			YAHOO.util.Event.on(window, 'load', function(){
				YAHOO.htmlblog.alternateRows.init('alternateRows', '#fff', '#ccc');
			});
		</script>
		<title>Alternate colors</title>
	</head>
	<body>
		<table class="alternateRows">
			<tr>
				<td>First Row</td>
			</tr>
			<tr>
				<td>Second Row</td>
			</tr>
			<tr>
				<td>Third Row</td>
			</tr>
			<tr>
				<td>Fourth Row</td>
			</tr>
			<tr>
				<td>Fifth Row</td>
			</tr>
		</table>
	</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *