javascript交替颜色行的表

我有一个页面上有几个表与它具有相同的类名。我想要替换此页面上每个表格的行的颜色。我正在使用下面的代码。此代码无法正常工作，因为一次只有一个表格是交替的颜色（第一个表格）。我究竟做错了什么？我的网页上的所有表格都有“mytable”类。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=i+2) 
     { 
      rows[i].bgColor = firstcolor ; 
      rows[i+1].bgColor = secondcolor ; 
     } 
    } 
}

来源

2010-03-09 quoc

'document.getElementsByClassName（）'不适用于所有浏览器，因为并非所有浏览器都支持它 - 请参阅http://www.quirksmode.org/dom/w3c_core.html – 2010-03-09 20:38:15

如果表中的一个具有奇数行，你的功能将打破上线

 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 ; 
     } 
    } 
}

来源

2010-03-09 20:43:20

谢谢。这是错误 – quoc 2010-03-09 20:57:02

如果我想要一列红色，两列蓝色，一列红色，两列蓝色等等，该怎么办？你能帮我解决这个问题吗？ – Ionut 2016-09-23 13:47:20

在这种情况下，你可能会绕过每一行，但用'（i％3 == 0）'替换'（i％2 == 0）'（所以它只显示第一个颜色（红色）第一个三行） – 2016-09-23 14:54:43

斑马条纹很容易使用jQuery。 Check it。值得使用和理解，你可以实现相同的。

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

来源

2010-03-09 20:36:09

jquery不是所有人的答案javascript问题... – Gregoire 2010-03-09 20:38:14

@Gregoire，我从来没有说jquery是解决方案，我提供了解决方案jQuery和常规解决方案，我指出了正确的解决方案。 – 2010-03-09 21:37:53

<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>

来源

2010-03-09 20:36:45 Gregoire

这不起作用。使用这个脚本，第一个表格甚至不会交替使用 – quoc 2010-03-09 20:41:20

@quoc：如果将alert（tableElements.length）;在第一次之前？ – Gregoire 2010-03-09 20:43:10

把alert（tableElements.length）;在第一节之前，我在FF 3中没有得到任何不同。6和IE 8 – quoc 2010-03-09 20:51:59

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（类名，firstcolor，secondcolor） { 变种tableElements = document.getElementsByClassName（类名）;

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 ; 
    } 
}

}

来源

2010-03-09 20:43:27 Crozin

对于CSS解决方案。可悲的是，IE8不支持'nth-child'，而其他的在动态插入/删除节点时会遇到困难（http://www.quirksmode.org/css/contents.html#t39）。 – outis 2010-03-09 20:51:04

谢谢，会考虑这个 – quoc 2010-03-09 20:57:41

如果我想要有一列红色，两列蓝色，一列红色，两列蓝色等等呢？你能帮我解决这个问题吗？ – Ionut 2016-09-23 13:47:26

这是概率不是你要找的答案，但这里是只有2 jQuery的:)

$线交替行颜色的快速简便的方法（'tr：odd'）.css（“background-color”，“＃F4F4F8”）; （'tr：even'）。css（“background-color”，“＃EFF1F1”）;

来源

2011-04-06 17:47:56 mommaroodles

javascript交替颜色行的表

回答

相关问题