<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<table border="1" cellpadding="10">
<thead>
<tr>
<td><input type="checkbox" id="cc" /></td>
<td>姓名</td>
<td>性别</td>
<td>暂住地</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="cc" /></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" id="cc" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" id="cc" /></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" id="cc" /></td>
<td>赵六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" id="cc" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" id="cc" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<button onclick="trcolor()">表格隔行变色</button>
<script>
function trcolor(){
$("tbody tr").css("background","white");
/*偶数行样式 :even :odd 奇数行样式 根据下标*/
$("tbody tr:even").css("background","grey");
/* 包含湖南移动上去变色 */
$("tbody tr:contains('湖南')").hover(function(){
$(this).css("background","pink");
$(this).css("color","red");
})
}
</script>
</body>
</html>
jQuery表格隔行变色
最新推荐文章于 2024-08-20 14:34:44 发布