Question

我正在尝试使用Javascript更改两个表的备用行的背景颜色。

我可以使用下面的javascript来完成它，但我确信有一种更高效或捷径的方法来使用CSS选择器选择所需的子元素。有人可以帮忙吗？

Imagen endpoint isn't provided or invalid

window.onload = function() {
  var elem = document.getElementsByTagName('table')
  for (let c = 0; c < elem.length; c++) {
    var childElem = elem[c].getElementsByTagName('tr');
    for (let d = 0; d < childElem.length; d = d + 2) {
      childElem[d].classList.add('alt');
    }
  }
}

tr {
  background-color: #fff;
}

.alt {
  background-color: #ccc;
}

Answer 1

您可以使用纯CSS和:nth-child来实现它：

＆＃13;

tr:nth-child(2n) {
  background-color: #eee;
}

tr:nth-child(2n + 1) {
  background-color: #ccc;
}

＆＃13;

<h2>Online Tx</h2>
<table>
  <tr>
    <td>As You Like It</td>
    <td>Comedy</td>
    <td></td>
  </tr>
  <tr>
    <td>All's Well that Ends Well</td>
    <td>Comedy</td>
    <td>1601</td>
  </tr>
  <tr>
    <td>Hamlet</td>
    <td>Tragedy</td>
    <td>1604</td>
  </tr>
  <tr>
    <td>Macbeth</td>
    <td>Tragedy</td>
    <td>1606</td>
  </tr>
  <tr>
    <td>Romeo and Juliet</td>
    <td>Tragedy</td>
    <td>1595</td>
  </tr>
</table>
<h2>Backend tx</h2>
<table>
  <tr>
    <td>The Fair Youth</td>
    <td>1–126</td>
  </tr>
  <tr>
    <td>The Dark Lady</td>
    <td>127–152</td>
  </tr>
  <tr>
    <td>The Rival Poet</td>
    <td>78–86</td>
  </tr>
</table>

＆＃13;

Answer 2

在CSS中，只需使用：

tr:nth-of-type(odd)

工作示例：

tr:nth-of-type(odd) {
background-color: rgb(191, 191, 191);
}

  <table>
    <tr>
      <td>As You Like It</td>
      <td>Comedy</td>
      <td></td>
    </tr>
    <tr>
      <td>All's Well that Ends Well</td>
      <td>Comedy</td>
      <td>1601</td>
    </tr>
    <tr>
      <td>Hamlet</td>
      <td>Tragedy</td>
      <td>1604</td>
    </tr>
    <tr>
      <td>Macbeth</td>
      <td>Tragedy</td>
      <td>1606</td>
    </tr>
    <tr>
      <td>Romeo and Juliet</td>
      <td>Tragedy</td>
      <td>1595</td>
    </tr>
  </table>

使用Javascript设置备用行的样式

2 个答案: