当前位置：首页 > JavaScript

js实现隔行

2026-03-02 08:21:34JavaScript

隔行变色实现方法

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

动态添加类名

const rows = document.querySelectorAll('tr');
rows.forEach((row, index) => {
  if (index % 2 === 0) {
    row.classList.add('even-row');
  } else {
    row.classList.add('odd-row');
  }
});

配合CSS样式：

.even-row { background-color: #f2f2f2; }
.odd-row { background-color: #ffffff; }

直接修改样式

const items = document.querySelectorAll('li');
items.forEach((item, i) => {
  item.style.backgroundColor = i % 2 ? '#eee' : '#fff';
});

动态数据场景处理

对于动态加载的数据，需要使用MutationObserver监听DOM变化：

const observer = new MutationObserver(() => {
  const newRows = document.querySelectorAll('tr:not(.styled)');
  newRows.forEach((row, i) => {
    row.classList.add(i % 2 ? 'odd' : 'even', 'styled');
  });
});
observer.observe(document.body, { childList: true, subtree: true });

使用CSS选择器替代方案

现代浏览器支持纯CSS实现隔行效果：

tr:nth-child(even) { background: #f5f5f5; }
tr:nth-child(odd) { background: #fff; }

性能优化建议

处理大型列表时建议使用文档片段：

const fragment = document.createDocumentFragment();
data.forEach((item, i) => {
  const row = document.createElement('tr');
  row.className = i % 2 ? 'odd' : 'even';
  // 添加单元格内容
  fragment.appendChild(row);
});
table.appendChild(fragment);

js实现隔行