<!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 οnclick="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>
