jquery实现表格隔行变色
<!DOCTYPE html><html><head><meta charset="utf-8"><title>变色表格</title><script src="jquery-3.6.0.js"></script></head><body><table b...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变色表格</title>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<table border="1px">
<tr>
<th align="center">姓名</th>
<th align="center">性别</th>
<th align="center">暂住地</th>
</tr>
<tr>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr class="aa">
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</table>
<!-- 间隔变色按钮 使用点击事件 -->
<button onclick="color()">表格按行间隔变色</button>
<!-- <input type="button" value="表格按行间隔变色" /> -->
</body>
<script>
//隔行变颜色
function color(){
//even 是从0开始计数 索引值为偶数的元素
//odd 是从0开始计数 索引值为奇数的元素
$("tr:odd").css("background","grey");//隔行变颜色
//含有湖南的内容
$(".aa").css("color","red");
$(".aa:contains('湖南')").css("background","pink");
}
</script>
</html>
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
2
0- 0
已为社区贡献5条内容
所有评论(0)