本文介绍如何使用JavaScript结合CSS实现网页列表的隔行换色效果。首先演示基础的手动遍历赋值方法，随后分析其局限性，如无法复用、不支持自定义起始位置及依赖onload事件。最后提供封装后的通用函数rowRender，支持指定容器ID、标签类型、奇偶样式类名及变色范围，适用于无序列表和表格等多种场景。
基础隔行换色实现
首先介绍一种基础实现方式。在CSS中预先定义好 .odd 和 .even 两个类，分别对应奇数行和偶数行的背景色样式。页面加载完成后，利用JavaScript获取目标列表元素，并执行以下逻辑：
// 当文件加载时，执行代码。
window.onload = function() {
// 获取<ul id="list" />对象
var list = document.getElementById('list');
// 获取list下面的所有li
var items = list.getElementsByTagName('li');
// 遍历items
for (var i = 0; i < items.length; i++) {
var className = (i % 2 == 0) ? ' odd' : ' even';
items[i].className += className;
}
}
这种前端处理的方式不会干扰后端逻辑，是一种较为理想的解决方案。其实际运行效果大致如下：
然而，上述基础方法存在若干缺陷：
- 仅能针对特定列表生效，缺乏复用性。
- 无法指定变色的起始索引，处理表格时需额外编写特殊逻辑。
- 逻辑全部嵌入在 onload 事件中，对页面加载时机依赖过强。
封装通用变色函数
对代码进行重构，将其封装为独立函数：
/**
* 此方法用于列表的隔行变色效果，可以灵活得为指定ID的列表指定隔行的颜色。
*
* @param id 列表的id
* @param item 要变色的行的标签
* @param odd 奇数行的样式类名，如果不指定，则默认为odd
* @param even 偶数行的样式类名，如果不指定，则默认为even
* @param start 开始变色的行的索引，如果不指定，则默认为0
* @param end 结束变色的行的索引，如果不指定，则默认为列表长度
*/
function rowRender(id, item, odd, even, start, end) {
// 获取列表容器
var list = document.getElementById(id);
// 获取列表
var items = list.getElementsByTagName(item);
// 修正初始位置，如果不是一个数字或者越界，则从0开始
if (isNaN(start) || (start < 0 || start >= items.length)) {
start = 0;
}
// 修正结束位置，如果不是一个数字或者越界，则为列表末尾
if (isNaN(end) || (end < start || end >= items.length)) {
end = items.length;
}
// 如果没有指定odd，则默认为'odd'
odd = odd || 'odd';
// 如果没有指定even, 则默认为'even'
even = even || 'even';
// 遍历列表并渲染效果
for (var i = start; i < end; i++) {
var className = ' ' + ((i % 2 == 0) ? odd : even);
items[i].className += className;
}
}
函数用法与示例
调用方式如下：
window.onload = function() {
// 渲梁list1下所有的li标签，使用默认的样式和起始位置
rowRender('list1', 'li');
// 渲梁list2下所有的li标签，使用指定的odd和默认的even，使用指定的起始位置
rowRender('list2', 'li', 'odd1', null, 2, 6);
// 渲梁table1下所有的tr标签，使用指定的odd和even，使用默认的起始位置
rowRender('table1', 'tr', 'tr-odd', 'tr-even');
// 渲梁table2下所有的tr标签，使用指定的odd和even，使用指定的起始位置
rowRender('table2', 'tr', 'tr-odd', 'tr-even', 1);
}
具体示例： Table 1
rowRender('table1', 'tr', 'tr-odd', 'tr-even');
Table 2
rowRender('table1', 'tr', 'tr-odd', 'tr-even', 1);
