javascript - javascript同时显示两个表格？

Question

我找到了一个脚本来更改每个第二行的颜色以使其看起来不错，但是当我在同一页面上添加另一个表格时，它会为第一个表格着色，但第二个表格没有颜色，这是为什么？ p>

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。