js实现隔行
隔行变色实现方法
使用JavaScript实现表格或列表的隔行变色效果，可以通过以下方式完成：
方法一：纯JavaScript实现
// 获取所有需要隔行的元素（如tr或li）
const rows = document.querySelectorAll('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 items = document.querySelectorAll('.list-item');
items.forEach((item, index) => {
item.classList.add(index % 2 === 0 ? 'even-row' : 'odd-row');
});对应CSS：
.even-row { background-color: #f5f5f5; }
.odd-row { background-color: #ffffff; }动态数据场景处理
当数据动态加载时，需要重新应用隔行样式：
function applyStriping() {
const dynamicRows = document.querySelectorAll('.dynamic-content');
dynamicRows.forEach((row, i) => {
row.style.backgroundColor = i % 2 ? '#f8f8f8' : '#ffffff';
});
}
// 数据更新后调用
applyStriping();响应式表格处理
对于可能发生排序或过滤的表格：
function stripeTable(table) {
const visibleRows = Array.from(table.querySelectorAll('tr:not(.hidden)'));
visibleRows.forEach((row, index) => {
row.className = index % 2 ? 'odd' : 'even';
});
}
// 表格变化时调用
document.querySelector('table').addEventListener('sort', () => {
stripeTable(document.querySelector('table'));
});CSS-only替代方案
虽然使用JavaScript更灵活，但纯CSS也能实现基本效果：
tr:nth-child(even) { background: #f2f2f2; }
tr:nth-child(odd) { background: #ffffff; }选择JavaScript方案的主要优势在于可以处理更复杂的逻辑，如动态过滤后的重新着色，或根据其他条件而非简单的奇偶行来设置样式。
