javascript - 如何用 % 突出显示每隔一行？

Question

如何在 JavaScript 中使用 % 突出显示(即更改背景颜色)每隔一行？我正在考虑if (i % 2 == 0)。这有效吗？

// declaring variables
var rows = 12;
var cols = 3;

document.write('<table border=2>');

for (var k = 0; k < head.length; k++) {
    // input the heading of the table
    document.write('<th>' + head[k] + '</th>');
}

for (var i = 0; i < rows; i++) {
    document.write('<tr>' + 0 + '</tr>');

    if (i % 2 == 0) {
        // don't know what to put in here
    } else {

    }

    for (var j = 0; j < cols; j++) {
        document.write('<td>' + Table[i][j] + '</td>');
    }
}

document.write('</table>');

Answer 1

我建议使用 css 来使用 nth-of-type

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-of-type

tr:nth-of-type(even) {
  background-color: red;
}

但是如果你必须使用javascript

document.querySelectorAll('tr').forEach((el, index) => {
  el.style = index % 2 === 0 ?
    'background-color: red' :
    'background-color: yellow';
})

<table id="table">
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>