javascript - 带有 Javascript 的条纹表 DOM

Question

我正在尝试制作一个表格，将奇数行着色为黄色，将偶数行着色为蓝色。目前，我正在使用 filter 方法，但这不起作用。 JavaScript 返回 tableRows[i].filter 不是函数。我知道这在 CSS 中非常容易，但我仍然想在 JavaScript 中尝试。

有什么想法吗？

var tableRows = document.getElementsByTagName('tr');

for (i = 0; i < tableRows.length; i++) {
  tableRows[i].filter(isOdd).style.backgroundColor = "yellow";
  tableRows[i].filter(isEven).style.backgroundColor = "blue";
}

function isOdd(value) {
  if (value % 2 == 0) {
    return false;
  } else if (value % 1 == 0) {
    return true;
  } else {
    return false;
  }
}

function isEven(value) {
  if (value % 2 == 0) {
    return true;
  } else {
    return false;
  }
}

<table>
  <tr>
    <td>
      Cell 1
    </td>
    <td>
      Cell 2
    </td>
  </tr>
  <tr>
    <td>
      Cell 3
    </td>
    <td>
      Cell 4
    </td>
  </tr>
  <tr>
    <td>
      Cell 5
    </td>
    <td>
      Cell 6
    </td>
  </tr>
</table>

Answer 1

在 JavaScript 中执行奇数/偶数操作的一种简单方法是使用 modulus 运算符 (%)。

看这个例子:

var tableRows = document.getElementsByTagName('tr');

for (var i = 0; i < tableRows.length; i++) {
  tableRows[i].style.backgroundColor = (i % 2)?"blue":"yellow";
}

<table>
  <tr>
    <td>
      Cell 1
    </td>
    <td>
      Cell 2
    </td>
  </tr>
  <tr>
    <td>
      Cell 3
    </td>
    <td>
      Cell 4
    </td>
  </tr>
  <tr>
    <td>
      Cell 5
    </td>
    <td>
      Cell 6
    </td>
  </tr>
</table>