Question

如何在JavaScript中使用.MDF突出显示（即更改背景颜色）每隔一行？我在考虑%。这有用吗？

if (i % 2 == 0)

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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>');

如何用％突出显示每隔一行？

2 个答案: