ansaurus

Question

JavaScript - Loop within a function to alt color table rows

Answer 1

+2 A:

If you really want to do this with JavaScript, I would suggest the following code:

First, make your tables have a class of "results" instead of ID "results1", "results2", etc (because as my comment on the question says, IDs must be unique, and getElementById will only return one result and apply to only one real element):

<table class="results">...</table>

Next, use this JavaScript:

<script type="text/javascript">
function alternate(classNameMatch) {
    var tables = document.getElementsByTagName("TABLE");
    for (var i=0; i < tables.length; i++) {
        var table = tables[i];
        if (table.className.indexOf(classNameMatch) == -1)) continue;

        for (var j=0; j < table.rows.length; j++) { // "TABLE" elements have a "rows" collection built-in
            table.rows[j].className = j % 2 == 0 ? "row-one" : "row-two";
        }
    }
}
</script>

Then call alternate("results"); on page load.

But, I really suggest doing this in PHP. JavaScript will be very inefficient with large result sets. It will also not show up right away, making the style of the page visibily change after page load.

I would also just add a class to every other row, and then style all rows by default one way and the other class the other way:

<style type="text/css">
table.results tr { background-color:#f0f0f0; }
table.results tr.row2 { background-color:#f0f0ff; }
</style>

Renesis 2010-01-13 19:03:56

Thank you Renesis, greatly appreciated.

Aaron 2010-01-13 19:07:01

Answer 2

+1 A:

Of course each call to the method is only applying to one table - you are not looping over a number of tables, but set the table var at the top of the document and then colour the rows in that table. As others have pointed out, IDs are meant to be unique within a document anyway, which is why getElementByID only returns a single value.

Doing this on the server-side would be much better as well, because that's the canonical document sent to everyone so doesn't rely on them having JS enabled, and doesn't take a possibly non-negligible amount of processing time while the page gets striped.

If you must do this client-side, a better implementation would be to give your tables a particular class (instead of ID); refactor your solution slightly so that you split the core of your functionality into a method that stripes a single table that's passed in; then find all tables with the class "stripeme" (or whatever), and loop over that result, passing each table into your striping method.

Andrzej Doyle 2010-01-13 19:05:30

ansaurus

tags:

views:

answers:

JavaScript - Loop within a function to alt color table rows

related questions