没有jQuery的交替表行背景色答案

【问题标题】：alternating table row backcolor without jQuery没有jQuery的交替表行背景色
【发布时间】：2014-10-29 18:51:09
【问题描述】：

假设这张桌子：

    <table>
        <tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
        <tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
        <tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
        <tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
        <tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
    </table>

使用这个 CSS：

    <style>
    .even{background:red;}
    </style>

如何编写一个纯 js 代码，将偶数类添加到表的偶数 tr 中？ [没有 jQuery]

【问题讨论】：

stackoverflow.com/questions/629614/…
请在此处查看常见问题以获取有关适当问题的建议。特别是，这个问题属于“你能想象一本关于这个主题的整本书吗？”的标题。网络上有整本书和无数教程。
你不需要js，只要tr:nth-of-type(even) {background:red;}。
@bmargulies：你能想象一本关于这个主题的整本书吗？？
@Madmartigan 写这个问题是为了暗示完全缺乏对 DOM 以及样式如何工作的知识。我不相信鼓励货物崇拜，这是在没有上下文的情况下提供剪切和粘贴解决方案的效果。

标签： javascript jquery html css

【解决方案1】：

如果您只是出于样式原因需要它，您可以使用 CSS3 选择器（无需 JavaScript）：

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

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

【讨论】：

【解决方案2】：

给表格一个 ID：

<table id="mytable"></table>

然后：

var i, len, 
    // assuming only one tbody
    // if none specified, it is automatically generated (like in your example)
    // if you were to have several you would have to iterate over those too
    rows = document.getElementById("mytable").
        getElementsByTagName("tbody")[0].
        getElementsByTagName("tr");
for (i = 1, len = rows.length; i < len; i += 2) {
    rows[i].className += " even";
}

【讨论】：

这会在 thead 和 tfoot 中找到 tr

【解决方案3】：

只需按 ID 获取表格元素并循环添加类名的行，如 fiddle 中所示

 <table id='myTable'>
   <tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
   <tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
   <tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
   <tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
   <tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
 </table>

  var table = document.getElementById('myTable');
  var rows = table.getElementsByTagName("tr");
  for(i = 0; i < rows.length; i++){
    if(i % 2 == 0){
      rows[i].className = "even";
    }else{
      rows[i].className = "odd";
    }
  }

【讨论】：

【解决方案4】：

这个充满table style tips的页面怎么样？它同时执行奇数行和偶数行，但您可以根据自己的情况对其进行更改。

<!-- Javascript goes in the document HEAD -->
<script type="text/javascript">
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');
}
</script>


<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.altrowstable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #a9c6c9;
    border-collapse: collapse;
}
table.altrowstable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table.altrowstable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
.oddrowcolor{
    background-color:#d4e3e5;
}
.evenrowcolor{
    background-color:#c3dde0;
}
</style>


<!-- Table goes in the document BODY -->
<table class="altrowstable" id="alternatecolor">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</tr>
<tr>
    <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
    <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
    <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>

<!--  The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->

【讨论】：

【解决方案5】：

我已经更正了，这里是答案：

<html>
    <head>
        <title></title>
        <meta name="author" content="SAP"/>
        <meta name="keywords" content="key1,key2"/>
        <style>
            .even{color:red;background:blue;}
        </style>
        <script type="text/javascript">
            var i, len;
            function onload() {
                var i, len, rows = document.getElementById("mytable").getElementsByTagName("tr");
                for (i = 1, len = rows.length; i < len; i += 2) {
                    rows[i].className += " even";
                }

            }
        </script>
    </head>
    <body onload="onload()">
        <table id="mytable">
            <tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
            <tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
            <tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
            <tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
            <tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>

        </table>
    </body>
</html>

【讨论】：