having two tables display at once javascript?

Question

I found a script to change the color of every seccond row to make it look nice, but when i add another table on the same page it colours the first table but the seccond table gets no colour why is this??

code of table.js

jQuery(document).ready(function() {

    //for tables style
    function altRows(id){
    if(document.getElementsByTagName){  

        var table = document.getElementById(id);  
        var rows = table.getElementsByTagName("tr"); 

        for(i = 0; i < rows.length; i++){          
            if(i % 2 == 0){
                rows[i].className = "evenrowcolor";
            }else{
                rows[i].className = "oddrowcolor";
            }      
        }
    }
}
window.onload=function(){
    altRows('alternatecolor');
}



});

php webpage code:

  <?php 
//first table
       echo'
           <table class="altrowstable" id="alternatecolor">
      <tr>
      <th>Seller</th>
      <th>price(per 1k doge)</th>
      <th>payment allowed</th>
      <th>View Trade</th>
      </tr>

      <td>Example</td>
        <td>Example</td>
          <td>Example</td>
        </tr>';



     echo'</table> <br />';  


//seccond table
 echo  '<h3>trades on going </h3>';

    echo ' <table class="gridtable">
     <table class="altrowstable" id="alternatecolor">
        <tr>
        <th>Trade User</th>
        <th>Cost($)</th>
        </tr>

     <td>Example</td>
        <td>Example</td>
          <td>Example</td>
        </tr>';

     echo'</table> ';  

?>

dont do it by id. do it by class

Batu.Khan
– Batu.Khan

2014-04-02 15:20:09 +00:00
Commented Apr 2, 2014 at 15:20 — Batu.Khan
– Batu.Khan, Commented Apr 2, 2014 at 15:20

Kryten · Accepted Answer · 2014-04-02 15:21:10Z

3

A better way to do this is via CSS.

tr:nth-child(odd) { background-color: black, color: white }
tr:nth-child(even) { background color: white, color: black }

This will apply to all tables on your page, without having to mess about with the HTML as output by your PHP or Javascript.

answered Apr 2, 2014 at 15:21

Kryten

15.8k7 gold badges50 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Emily Shepherd · Accepted Answer · 2014-04-02 15:21:17Z

0

You are referencing the first table by its id alternatecolor when you call document.getElementById(id). Perhaps add an id to your second table, then call altRows again for it?

Editing the second table in the PHP File:

echo ' <table class="gridtable" id="secondTable">

Editing the JavaScript:

window.onload=function(){
    altRows('alternatecolor');
    altRows('secondTable');
}

answered Apr 2, 2014 at 15:21

Emily Shepherd

1,3679 silver badges20 bronze badges

1 Comment

user3490052 Over a year ago

coudent figuar out how to do it and your way just fixed it for me thanks :)

Collectives™ on Stack Overflow

having two tables display at once javascript?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related