javascript - 尝试仅使用 js 制作备用行#eee 背景

Question

我似乎不明白为什么它不点击这里。代码没有任何语法错误，但显然逻辑有问题。因此，基本上，第一行是白色，第二行将是其他颜色或#eee。如果有人能看到这个错误并让我知道，我将非常感激。

提前致谢!

window.onload = function() {
  var x = document.getElementsByTagName('table');
  
  for (let i = 0; i < x.length; i++) {
    var child = x[i].getElementsByTagName('tr');
    
    for (let j = 0; j < child.length; j += 2) {
      child[j].classList.add('alt');
    }
  }
}

.alt{
  background-color: #eee;
}

<table>
  <caption>Table 1: Power Mac G5 tech specs </caption>
  <tr>
      <th>Configurations</th>
      <th>Dual 1.8GHz</th>
      <th>Dual 2GHz</th>
      <th>Dual 2.5GHz</th>
  </tr>
  <tr>
      <td>Model</td>
      <td>M9454LL/A</td>
      <td>M9455LL/A</td>
      <td>M9457LL/A</td>
  </tr>
  <tr>
      <td>G5 Processor</td>
      <td>Dual 1.8GHz PowerPC G5</td>
      <td>Dual 2GHz PowerPC G5</td>
      <td>Dual 2.5GHz PowerPC G5</td>
  </tr>
  <tr>
      <td>Frontside bus</td>
      <td>900MHz per processor</td>
      <td>1GHz per processor</td>
      <td>1.25GHz per processor</td>
  </tr>
  <tr>
      <td>Level2 Cache</td>
      <td>512K per processor</td>
      <td>512K per processor</td>
      <td>512K per processor</td>
  </tr>
</table>

Answer 1

你的代码很完美。您正在添加 alt 类，但没有样式来制作背景 #eee。添加 CSS 类或使用 JS 添加背景。

方法一:

.alt {
  background: #eee;
}

方法2:

child[j].classList.add('alt');
child[j].style.background = '#eee'

方法 3:仅使用 CSS

table tr:nth-child(even) {
  background: #eee;
}

window.onload = function() {
  var x = document.getElementsByTagName('table')
  for (let i = 0; i < x.length; i++) {
    var child = x[i].getElementsByTagName('tr');
    for (let j = 0; j < child.length; j = j + 2) {
      child[j].classList.add('alt');
      child[j].style.background = '#eee'
    }
  }
}

<table>

  <caption>Table 1: Power Mac G5 tech specs </caption>

  <tr>

    <th>Configurations</th>

    <th>Dual 1.8GHz</th>

    <th>Dual 2GHz</th>

    <th>Dual 2.5GHz</th>

  </tr>

  <tr>

    <td>Model</td>

    <td>M9454LL/A</td>

    <td>M9455LL/A</td>

    <td>M9457LL/A</td>

  </tr>

  <tr>

    <td>G5 Processor</td>
    <td>Dual 1.8GHz PowerPC G5</td>

    <td>Dual 2GHz PowerPC G5</td>

    <td>Dual 2.5GHz PowerPC G5</td>

  </tr>

  <tr>

    <td>Frontside bus</td>

    <td>900MHz per processor</td>

    <td>1GHz per processor</td>

    <td>1.25GHz per processor</td>

  </tr>

  <tr>

    <td>Level2 Cache</td>

    <td>512K per processor</td>

    <td>512K per processor</td>

    <td>512K per processor</td>

  </tr>

</table>