如何在JavaScript中用%运算符实现表格隔行高亮？

当然可行！你用i % 2 == 0来判断奇偶行的思路完全没问题，这是实现表格隔行高亮最经典的方法之一。取模运算符%会返回两个数相除后的余数，当循环变量i是偶数时，i % 2的结果就是0，奇数则为1，刚好能帮我们区分开奇偶行。

不过看你的代码片段，有几个小问题需要调整，才能让功能正常工作：

• 你用到的head变量没有定义，会导致代码报错
• 表头的<th>标签需要包裹在<tr>里，否则表格结构会出错
• 你现在的判断逻辑写在了<tr>输出之后，这时候用document.write已经把行输出到页面了，再修改样式就不方便，应该在输出<tr>的时候就带上样式

下面给你两种修正后的实现方案：

方案一：直接通过JS设置内联样式 #

这种方式适合简单场景，直接在生成<tr>时通过style属性设置背景色：

// 先定义表头数组，补上你缺失的变量
var head = ['列1', '列2', '列3'];
var rows = 12;
var cols = 3;

document.write('<table border=2>');
// 输出表头行
document.write('<tr>');
for (var k = 0; k < head.length; k++) {
    document.write('<th>' + head[k] + '</th>');
}
document.write('</tr>');

// 输出表格内容行
for (var i = 0; i < rows; i++) {
    // 根据i的奇偶性选择背景色
    var bgColor = i % 2 === 0 ? '#f0f0f0' : '#ffffff';
    // 输出<tr>时直接带上背景色样式
    document.write('<tr style="background-color:' + bgColor + '">');
    // 循环生成每一列的内容（你之前只写了0，这里补上列循环）
    for (var j = 0; j < cols; j++) {
        document.write('<td>第' + (i+1) + '行，第' + (j+1) + '列</td>');
    }
    document.write('</tr>');
}
document.write('</table>');

方案二：结合CSS类实现（推荐） #

这种方式把样式和逻辑分离，后续修改样式只需要调整CSS，不用改动JS代码，更符合前端最佳实践：

<style>
    .even-row { background-color: #f0f0f0; }
    .odd-row { background-color: #ffffff; }
</style>

<script>
var head = ['列1', '列2', '列3'];
var rows = 12;
var cols = 3;

document.write('<table border=2>');
document.write('<tr>');
for (var k = 0; k < head.length; k++) {
    document.write('<th>' + head[k] + '</th>');
}
document.write('</tr>');

for (var i = 0; i < rows; i++) {
    // 根据奇偶行选择对应的CSS类
    var rowClass = i % 2 === 0 ? 'even-row' : 'odd-row';
    document.write('<tr class="' + rowClass + '">');
    for (var j = 0; j < cols; j++) {
        document.write('<td>第' + (i+1) + '行，第' + (j+1) + '列</td>');
    }
    document.write('</tr>');
}
document.write('</table>');
</script>

额外小技巧：纯CSS实现（无需JS） #

如果你的项目不需要兼容特别老的浏览器，其实可以不用JS处理样式，直接用CSS的伪类选择器就能实现隔行高亮：

table tr:nth-child(even) {
    background-color: #f0f0f0;
}
table tr:nth-child(odd) {
    background-color: #ffffff;
}

这样你的JS代码只需要负责生成表格的结构就行，样式完全交给CSS，代码会更简洁～

内容的提问来源于stack exchange，提问作者Chris Chan