Fog Creek Software
Discussion Board

Zebraline table property

I am setting alternate colours of table row (Zebra Lines) dynamically using java script. Is there any HTML table property by setting which I can get the same result for a table holding static data.

Monday, July 26, 2004

Nope.  Your best bet is to use javascript to recognize a table with a certain class and have it apply classes to alternating lines for you.

Monday, July 26, 2004

Just set two classes in your CSS, "even" and "odd" with different background colors.  Then for each row in the table, give the <tr> a different class.

This is a pain to maintain in a static HTML table (vs. being generated by server side code), but it works simply enough.

Monday, July 26, 2004

Yes......... I am doing the same thing .......created two classes zebra1 and zebra2 with different bgcolor values and applying alternatively to individual row.........

Is there any thing else......... like setting perticular property of table.........I tried but not found........

Monday, July 26, 2004

You could set the alternating classes by traversing the table properties via the DOM..

e.g.  for the follwing table:

<table style="width:100%" id="mytable">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
<tr><td>Row 4</td></tr>

You could use the following Javascript to style it:

    var mytable = document.getElementById("mytable");
    var rows = mytable.getElementsByTagName("tr");
    for (var i=0; i<rows.length; i++)
        var tableRow = rows.item(i);
        tableRow.setAttribute("class", i % 2 == 0 ? "even" : "odd"); // W3C
        tableRow.setAttribute("className", i % 2 == 0 ? "even" : "odd"); // MSIE


At least this version doesn't force you to keep track of the odd and even classes when adding new rows to the table.

Monday, July 26, 2004

*  Recent Topics

*  Fog Creek Home