本文介绍两种实现表格奇偶行不同背景色的方法。首先展示使用jQuery的:odd和:even选择器快速添加类名的方式;随后详解纯JavaScript实现逻辑,包括获取table、tbody及tr元素,并通过循环判断索引奇偶性来动态修改背景颜色。
jQuery实现奇偶行样式
若项目已引入jQuery库,可直接利用其提供的伪类选择器简化代码编写。
具体实现代码如下:
$("tr:odd").addClass("clazzName");
$("tr:even").addClass("clazzName");纯JavaScript实现方案
若不使用第三方库,仅依靠原生JavaScript实现,步骤如下:
第一步,通过ID获取目标table元素,例如:var table = document.getElementById()。
第二步,从table中提取tbody元素,通常取第一个:var tbody = table.getElementsByTagName("tbody")[0]。
第三步,获取tbody下的所有tr元素:var trs = tbody.getElementsByTagName("tr")。
第四步,遍历tr数组并对每个元素应用样式。
核心逻辑代码如下:
for(var i=0; i<trs.length; i++){
if(i%2==0){
trs[i].style.backgroundColor="red";
}else{
trs[i].style.backgroundColor="blue";
}
}注意,获取tbody标签是必要的步骤。即便HTML源码中未显式书写tbody标签,浏览器在解析table时也会自动补全该结构。
因此,所有的tr标签实际上都位于tbody内部,操作时需确保层级正确。