jQuery表格的隔行变色_jquery表格偶数行变色-CSDN博客

本文链接：https://blog.csdn.net/m0_57202083/article/details/119923442

:even 偶数行样式

:odd 奇数行样式

:contains('包含')

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.6.0.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>