Question

假设这个表：

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

Answer 1

为表格提供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";
}

Answer 2

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

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

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

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

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

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

交替表行backcolor没有jQuery

5 个答案: