JS实现隔行换色
作者：互联网
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<script src="js/jquery-3.3.1.js"></script>
<script>
/*window.onload=function(){
//获得表格
var tab = document.getElementById("tab1");
//获得行数
var l= tab.rows.length;
//遍历行tab.rows,隔行换色
for(var i=0;i<l;i++){
if(i%2==0){
tab.rows[i].style.backgroundColor="yellow";
}else{
tab.rows[i].style.backgroundColor="pink";
}
}
}*/
$(function(){
$("tr:odd").css("background-color","pink");
$("tr:even").css("background-color","yellow");
})
</script>
</head>
<body>
<center><h1>JS实现隔行换色！！！</h1></center>
<table id="tab1" border="1" align="center" width="700px" height="200px" >
<tr>
<td>序号</td>
<td>学科</td>
<td>描述</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>java</td>
<td>万物皆对象，学了java不愁没对象！</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>大数据</td>
<td>海量数据的存储分析与处理，超强大的！</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>前端</td>
<td>网站和APP的页面全是他们写出来的，厉害吧！</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
标签：rows,换色,JS,隔行,tab,var 来源： https://blog.csdn.net/qq_40959562/article/details/99701900