Question

我正在尝试制作一个将奇数行变为黄色甚至是蓝色行的表格。目前，我正在使用过滤方法，但这不起作用。 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 运算符（%）。

见这个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用CSS，应用:nth-child(odd)和(even)选择器：

table tr:nth-child(even) {
  background-color: blue;
}

table tr:nth-child(odd) {
  background-color: 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>

修改但是，如果您确实想要使用JavaScript，则可以在NodeList行上调用Array#forEach函数，而不是使用filter。如果您愿意，for - 循环也可以替换为forEach，但我倾向于使用declarative approach更多。

var tableRows = document.getElementsByTagName('tr') [].forEach.call(tableRows, function (row, i) { row.style.backgroundColor = isEven(i) ? 'blue' : 'yellow' }) function isEven (x) { return x % 2 === 0 } function isOdd(x) { return x % 2 !== 0 }

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

带有Javascript的条纹表DOM

2 个答案: