如何将样式应用于表中的偶数行或奇数行?

时间:2014-09-03 14:27:28

标签: javascript html

我想将样式应用于表的偶数/奇数行,我知道它与css和jquery非常容易。但我试图将该表放在Windows小工具中,以下代码仅适用于不在该小工具中的浏览器。

table.data-Tables tbody tr:nth-child(even){
    background-image: none;
    background:#ECF0F1;
}

上面的代码我试过用CSS不起作用,css工作但是一些css代码不能用于小工具,可能是新的css是小工具不能接受的.. 但无论如何,如果CSS不起作用,那么我想尝试javascript。 任何人都可以在java脚本中为偶数行添加一些样式。

表:

<table class="data-Tables" cellpadding=0 cellspacing=0 border=0>
    <thead>
    <tr>
    <th>Room</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Admin Room No: 36</td>
    </tr>
    <tr>
    <td>Director Room No: 36</td>
    </tr>
    </tbody>
</table>

1 个答案:

答案 0 :(得分:2)

您可以遍历行并将类添加到偶数行。如果他们没有任何其他类值,那么:

function addClassToEvenRows(table) {
  var rows = table.rows;
  for (var i=0, iLen=rows.length; i<iLen; i++) {
    rows[i].className = i%2? '' : 'even';
  }
}

会做到这一点。如果可能有其他类值,则:

function addClassToEvenRows(table) {
  var rows = table.rows;
  var className;

  for (var i=0, iLen=rows.length; i<iLen; i++) {
    if ((i + 1)%2) {
      rows[i].className += (rows[i].className.length? ' ' : '') + even;
    }
  }
}