BeWebmaster

Dreamweaver: Alternating table row color with simple JavaScript and CSS

Ad

In this tutorial I will show you how to alternate table row colors using Javascript and CSS.
You can create this script using any HTML editor or a notepad. 
However, in this example I am using Dreamweaver to:

  • create a table
  • create a JavaScript file
  • save the script as a Dreamweaver snippet for later use

How does the script work?

First step is to create two style sheet rules using class selector - one for each
alternating color. Next you assign an id to a table you want to affect. The script
then calculates number of rows and determines which css class to use for which row.

Step by step instructions

These steps assume that you created an HTML document and attached a CSS file to it.
If you want to know how to do that in Dreamweaver please read
Create a new XHTML page; attach a CSS file to it; all in Dreamweaver Design View.

Create Table

From the Dreamweaver's insert toolbar, select Layout tab and click on table icon.
Create a table with three columns and five rows.

Click OK.

Your table is now added to your document.

Select the table using the properties panel or the Tag Inspector panel add "alter_rows" ID to the table.

Create CSS rules

First we will create a style for the table header row.

1. Click on the New CSS rule button on the CSS Panel and create a class called .tableheader.

2 In the font category add color:#ffffff

3. In the background category add background-color:#000000 and click OK.

Next repeat steps 1 -3 to create two more classes: one for each alternating row.

Name the first class .color_one and give it a color:#000000 and a background-color:#cccccc.

The second class can be called .color_two and have a color:#000000 and a  background-color:#eeeeee;

Apply table header style to the first table row

Save your HTML file as 'alter_table.html' and your CSS file as alter_table.css'.

Create Javascript file with alternatecolor function

While Dreamweaver is open, press CTRL+N to bring up a new document dialog box.
Under Category make sure Basic page is selected and double-click on JavaScript.

Blank JavaSript file opens.

Add following code to your JavaScript.

function alternatecolor(id){ 
 if(document.getElementsByTagName){  
   var table = document.getElementById(id);  
   var rows = table.getElementsByTagName("tr");  
   for(i = 0; i < rows.length; i++){           
     if(i % 2 == 0){ 
       rows[i].className = "color_one";
     }else{ 
       rows[i].className = "color_two";
     }      
   }
 }
}

Save the document as alternate_color.js.

JavaScript code breakdown

As you can see this JavaScript code is fairly simple. It contains only one function
that takes a table ID as a parameter.

if(document.getElementsByTagName){

This line ensures compatibility with older browsers

var table = document.getElementById(id); 
var rows = table.getElementsByTagName("tr");  

In these two lines we are getting table rows based on the table ID parameter
passed to this function, and assigning those table rows to a variable called rows.

Next is a FOR loop that iterates through all rows (rows.lenght). By using modules (%)
operator we are assuring that all rows with even (i) numbers get assigned color_one class
and all odd (i) numbers get assigned color_two class.

Applying JavaScript function to the table

First we need to attach the javasctipt file to our HTML page.

Make sure your HTML page is current working document in Dreamweaver. In the
document window toolbar, click on View Options button and select Head Content.

Head content toolbar displays.

Click anywhere on the Head Content toolbar to activate it. The toolbar turns white.

On the insert toolbar select HTML and click on Script button. This opens a Script dialog box.
Make sure Language field is set to JavaScript. Using a small folder icon add the alternate_color.js file.

Click OK.

Your Head Content toolbar should now include the script icon.

Implementing the function

While your HTML file is still open and active in Dreamwaver, right-click on the <body> tag
located on the Document Window status bar. In the right-click menu select "Quick Tag Editor"
and add onload attribute with following value:

 onload="javascript:alternatecolor('alter_rows');

Save your files and while the HTML file is active press F12 to preview.

And we are DONE!