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

Question

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

Answer 1

您可以迭代行并仅向偶数行添加一个类。如果它们没有任何其他类值，则:

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