Попытка сделать чередующиеся строки #eee фоном, используя js

Question

Кажется, я не могу понять, почему здесь не щелкают. В коде нет синтаксических ошибок, но, очевидно, что-то не так с logi c. Таким образом, в основном, так как первый ряд белый, второй ряд будет другого оттенка или #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.

Метод 1:

.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>