如何用 % 突出显示每一行？答案

【问题标题】：How to highlight every other row with %?如何用 % 突出显示每一行？
【发布时间】：2018-04-18 21:09:24
【问题描述】：

如何在 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>');

【问题讨论】：

高亮是什么意思？
这行得通吗？你为什么不能自己试试看？
您为什么要这样做？如果通过突出显示您的意思是更改背景颜色或其他内容，只需使用 CSS：tr:nth-of-type(odd) td。
Chris 是我的解决方案，您希望做什么？
抱歉，应该是“我该怎么做？”

标签： javascript html css

【解决方案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>

【讨论】：

OP 询问 “如何在 JavaScript 中使用 % 突出显示每一行？”。这没有回答。我同意这将做突出部分，但这不是他们要求的。您应该首先发表评论和澄清。就目前而言，这是错误的。
我已经评论过，如果他有理由等待回复会很高兴地改变我的答案，但如果他的意图是设置每一行的样式，那么工作也是向 OP 展示如何正确地做事，然后用 % 来做如果我误解了他的问题，那么冗长且不正确，那么足够公平
感谢您的回答，我很感激，但我将不得不使用 if(i%2 ==0) 来解决这个问题。
但是为什么你没有说为什么。我已经在我的回答中展示了如何做到这一点
克里斯是否有理由需要使用 % 而不是拥有 css 类，因为如果没有理由我强烈建议使用 css

【解决方案2】：

您的代码有一些问题：

您必须将<td>（单元格）放在<tr>（行）之间。所以你必须在循环的开头打开<tr>并在结尾关闭它。
您不需要cols 变量，可以使用head.length 或Table[0].length。
你也不需要rows变量，你可以使用Table.length。
在<td> 中，添加style 属性并将background-color 设置为根据% 条件计算的颜色。

// declaring variables
var head = ['name', 'address', 'phone'];
var Table = [[10, 20, 30], [40, 50, 60], [70, 80, 90], [100, 200, 300]];

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 < Table.length; i++) {
  document.write('<tr>');

  for (var j = 0; j < head.length; j++) {
    var bg = (i % 2 == 0) ? '#f00' : '#0ff';
    document.write('<td style="background-color: ' + bg + ';">' + Table[i][j] + '</td>');
  }
  document.write('</tr>');
}

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

【讨论】：

哇，非常感谢您指出，我确实发现我的代码有点奇怪，但我就是不知道在哪里。