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.

Sony
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.

Lou
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.

anon
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........

Sony
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>
</table>

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.

anon
Monday, July 26, 2004

*  Recent Topics

*  Fog Creek Home