在这里插入代码片@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");
      });

参考链接:
纯Css
纯JS
jquery

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐