JS控制表单奇偶行样式的简单方法

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内部，操作时需确保层级正确。