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

How to apply styles to even or odd rows in table?

本文关键字：样式 应用于      更新时间：2023-09-26

我想将样式应用于表的偶数行/奇数行，我知道使用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>

您可以对行进行迭代，并在偶数行中添加一个类。如果它们没有任何其他类值，那么：

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;
    }
  }
}
相关文章：