javascript - Loop within a function to alt color table rows -


i have query building form built in php. results of query returned , placed in 2 different tables 1 above other. (table id's results, , results2) each record returned builds 2 tables display data. (soon three)

i'm using following code change class tags of <tr>'s provide alternate row coloring:

<script type="text/javascript"> function alternate(id){   if(document.getelementsbytagname){     var table = document.getelementbyid(id);     var rows = table.getelementsbytagname("tr");     for(i = 0; < rows.length; i++){       if(i % 2 == 0){        rows[i].classname = "row-one";        }else{        rows[i].classname = "row-two";             }           }          }         } </script> 

then i'm using body onload so:

<body onload="alternate('results'); alternate('results2');"> 

the problem colors first 2 instances of these tables, when depending on amount of records returned there hundreds of them.

how can function apply every table in document id = results , results2 , results3?

if really want javascript, suggest following code:

first, make tables have class of "results" instead of id "results1", "results2", etc (because comment on question says, ids must unique, , getelementbyid return 1 result , apply 1 real element):

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

next, use javascript:

<script type="text/javascript"> function alternate(classnamematch) {     var tables = document.getelementsbytagname("table");     (var i=0; < tables.length; i++) {         var table = tables[i];         if (table.classname.indexof(classnamematch) == -1)) continue;          (var j=0; j < table.rows.length; j++) { // "table" elements have "rows" collection built-in             table.rows[j].classname = j % 2 == 0 ? "row-one" : "row-two";         }     } } </script> 

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

but, really suggest doing in php. javascript very inefficient large result sets. not show right away, making style of page visibily change after page load.

i add class every other row, , style rows default 1 way , other class other way:

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

Comments

Popular posts from this blog

c++ - Convert big endian to little endian when reading from a binary file -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

unicode - Are email addresses allowed to contain non-alphanumeric characters? -