【前端】实现表格奇偶行不同背景样式

最新推荐文章于 2024-04-07 17:33:13 发布

原创最新推荐文章于 2024-04-07 17:33:13 发布

· 594 阅读

4 ·

版权

文章标签：

#javascript #css #jquery

前端专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用纯CSS、JavaScript及jQuery来实现表格中奇数行和偶数行的不同背景颜色。通过这些方法，可以轻松地为表格添加视觉效果，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入代码片@TOC

实现表格奇偶行不同背景样式

实现表格等奇偶行的不同样式

Css实现

:nth-child() 选择器：
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。

tr:nth-child(odd){
	background:#000;
}
tr:nth-child(even){
	background:#fff;
}

纯JavaScript实现

var tableDemo=document.getElementById("tableDemo");
var trDemo=table.getElementsByTagName("trDemo");
for(var i=0 ; i<trDemo.length ; i++ ){
		if( i%2==0 ){
			trDemo[i].style.backgroundColor="#000";
		}
		else{
			trDemo[i].style.backgroundColor="#fff";
		}
	}

Jquery实现

$(document).ready(function() {
        $("#tbody tr:odd").css("background-color", "#000");
        $("#tbody tr:even").css("background-color", "#fff");
      });