Alternating Table Row Colors Using Javascript

screenshot of table row colors
sample table

Alternating Table Row Colors is available in ZIP and may be downloaded free. You have permission to redistribute it, share it with friends, and copy it to your cloud backup drive. Open the PDF and print. Enjoy!

download ZIP file below

Alternating table row color script is easy to implement and saves a ton of work. Rather than labelling every other TD row, simply setup the script and let it do the work for you.

You'll be inserting script into your page head, body tag, and body to get this going.

The table colors are easily customizable by changing the values in the javascript.

Instructions

1. Start by inserting a bit of javascript within the HEAD section of your page
(included in ZIP download, below):

<script type="text/javascript">
function setcolor() {
var tbl = document.getElementById("server");
tbl.style.color = "white";
tbl.rows[0].style.backgroundColor = "green";
for (var i = 1; i < tbl.rows.length; i++) {
if (i % 2 == 0)
tbl.rows[i].style.backgroundColor = "gray";
else
tbl.rows[i].style.backgroundColor = "brown";
}
}
</script>


2. Next, add an Onload script to the body tag:

<body onload="setcolor();">


3. Lastly, set up your table. Here's a sample:

<table cellpadding="8" cellspacing="2" id="server">
<tr>
<th>TH Name 1 </th>
<th>TH Name 2 </th>
</tr>
<tr>
<td> TD Table Data 1 </td>
<td> TD Table Data 2 </td>
</tr>
<tr>
<td> TD Table Data 3 </td>
<td> TD Table Data 4 </td>
</tr>
<tr>
<td> TD Table Data 5 </td>
<td> Table Data 6 </td>
</tr>
<tr>
<td> TD Table Data 7 </td>
<td> TD bla bla bla 8 </td>
</tr>
</table>

NOTE: the ID of your table MUST match the ID in the javascript code located in the head section. Change it to whatever you wish, but they must match.

Open your page with a browser and test the script, and change the colors to match your website.

Download this ZIP file Alternating Table Row Colors ZIP
contact us to report broken links


Add Comment

Visitor Comments (1)

Topic: Alternating Table Row Colors
Full StarFull StarFull StarFull StarFull Star 5/5 (1)
Facebookdel.icio.usStumbleUponDiggTechnoratiGoogle+RedditMySpaceTwitterLinkedIn
Full StarFull StarFull StarFull StarFull Star
Tom C. says...
This has saved me a ton of time and headache when using tables on my website. Hope you find it useful also. Enjoy!
4th December 2014 11:07pm
Page 1 of 1
Norton SafeWeb   Creative Commons License   search button