js实现隔行

JavaScript 实现隔行变色

使用 JavaScript 实现表格或列表的隔行变色效果，可以通过以下方法完成：

HTML 结构示例

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

方法一：使用纯 JavaScript

const table = document.getElementById('myTable');
const rows = table.getElementsByTagName('tr');

for (let i = 0; i < rows.length; i++) {
  if (i % 2 === 0) {
    rows[i].style.backgroundColor = '#f2f2f2';
  } else {
    rows[i].style.backgroundColor = '#ffffff';
  }
}

方法二：使用 CSS 类名

const table = document.getElementById('myTable');
const rows = table.getElementsByTagName('tr');

for (let i = 0; i < rows.length; i++) {
  rows[i].classList.add(i % 2 === 0 ? 'even' : 'odd');
}

对应的 CSS 样式：

.even {
  background-color: #f2f2f2;
}

.odd {
  background-color: #ffffff;
}

方法三：使用 jQuery 如果项目中已引入 jQuery 库，可以简化代码：

$('#myTable tr:even').css('background-color', '#f2f2f2');
$('#myTable tr:odd').css('background-color', '#ffffff');

动态数据处理的注意事项 当表格数据动态加载时，应在数据加载完成后执行隔行变色代码，或将代码封装为函数在数据更新后调用。

性能优化建议 对于大型表格，建议使用方法二（CSS 类名）而不是直接操作 style 属性，这样可以利用浏览器的渲染优化。

浏览器兼容性 上述方法在所有现代浏览器中均可正常工作，包括 Chrome、Firefox、Safari 和 Edge。如需支持旧版 IE 浏览器，可能需要添加兼容性处理代码。