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

作者:像素猫

时间:2026-10-27

浏览:182

本文介绍两种实现表格奇偶行不同背景色的方法。首先展示使用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内部,操作时需确保层级正确。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章