有兩個表一次顯示javascript？

Question

我找到了一個腳本來更改每個第二行的顏色，以使其看起來不錯，但是當我在同一頁上添加另一個表時，它會為第一個表上色，但是第二個表卻沒有顏色，這是為什么？

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網頁代碼：

  <?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> ';  

?>

Answer 1

更好的方法是通過CSS。

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

這將適用於頁面上的所有表，而無需弄亂PHP或Javascript輸出的HTML。

Answer 2

當您調用document.getElementById(id)時，您將通過其ID alternatecolor引用第一個表。 也許在第二個表中添加一個id，然后再次為其調用altRows ？

編輯PHP文件中的第二個表：

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

編輯JavaScript：

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