Question

我有一个页面，上面有几个表，具有相同的类名。我希望在此页面上交替显示每个表的行的颜色。我正在使用下面的代码。此代码无法正常工作，因为一次只有一个表是交替颜色（第一个表）。我究竟做错了什么？我页面上的所有表格都有“mytable”类。

function altrows(classname,firstcolor,secondcolor)
{
    var tableElements = document.getElementsByClassName(classname) ;
    for(var j= 0; j < tableElements.length; j++)
    {
        var table = tableElements[j] ;

        var rows = table.getElementsByTagName("tr") ;
        for(var i = 0; i < rows.length; i=i+2)
        {
            rows[i].bgColor = firstcolor ;
            rows[i+1].bgColor = secondcolor ;
        }
    }
}

Answer 1

rows[i]将始终存在，但rows[i + 1]可能不存在。然后rows[i+1].bgColor = secondcolor ;会导致某种致命错误，从而破坏整个脚本。

考虑使用CSS：

table tr:nth-child(even) {
    background-color: red;
}

table tr:nth-child(odd) {
    background-color: blue;
}

或者使用固定的JS：

函数altrows（classname，firstcolor，secondcolor） { var tableElements = document.getElementsByClassName（classname）;

for(var j = 0; j < tableElements.length; j++)
{
    var table = tableElements[j] ;

    var rows = table.getElementsByTagName("tr") ;
    for(var i = 0; i < rows.length; i++)
    {
        rows[i].bgColor = i % 2 == 0 ? firstcolor : secondcolor ;
    }
}

}

Answer 2

使用jQuery可以轻松实现Zebra条带化。 Check it。值得使用和理解，你可以实现相同的。

Sitepoint有一个很好的教程，只使用javascript。没有jquery。

Answer 3

<script type="text/javascript">
function altrows(classname,firstcolor,secondcolor)
{
    var tableElements = document.getElementsByClassName(classname) ;
    for(var j = 0; j < tableElements.length; j++)
    {
        var table = tableElements[j] ;

        var rows = table.getElementsByTagName("tr") ;
        for(var i = 0; i <= rows.length; i++)
        {
            if(i%2==0){
                rows[i].style.backgroundColor = firstcolor ;
            }
            else{
                rows[i].style.backgroundColor = secondcolor ;
            }
        }
    }
}
</script>

Answer 4

如果您的某个表有一个奇数行，那么您的函数将在行

中断

        rows[i+1].bgColor = secondcolor ;

并且不处理以下任何表格。您应该在设置secondcolor之前检查是否有一行：

function altrows(classname,firstcolor,secondcolor)
{
   var tableElements = document.getElementsByClassName(classname) ;
   for(var j= 0; j < tableElements.length; j++)
   {
      var table = tableElements[j] ;

      var rows = table.getElementsByTagName("tr") ;
      for(var i = 0; i < rows.length; i=i+2)
      {
        rows[i].bgColor = firstcolor ;
        if ( i+1 < rows.length ) {
            rows[i+1].bgColor = secondcolor ;
        }
      }
   }
}

或遍历每一行而不是循环遍历两行：

function altrows(classname,firstcolor,secondcolor)
{
   var tableElements = document.getElementsByClassName(classname) ;
   for(var j= 0; j < tableElements.length; j++)
   {
      var table = tableElements[j] ;

      var rows = table.getElementsByTagName("tr") ;
      for(var i = 0; i < rows.length; i++)
      {
        rows[i].bgColor = (i%2==0) ? firstcolor : secondcolor ;
      }
   }
}

Answer 5

这可能不是你要找的答案，但这是一种快速简单的方法，只用2行jquery交替行颜色：）

$（'tr：odd'）。css（“background-color”，“＃F4F4F8”）;

$（'tr：even'）。css（“background-color”，“＃EFF1F1”）;

javascript交替颜色的表行

5 个答案: