表格各行变色

最新推荐文章于 2022-07-14 11:16:01 发布

依然泛特西

最新推荐文章于 2022-07-14 11:16:01 发布

阅读量242

点赞数

本文链接：https://blog.csdn.net/weixin_39823527/article/details/78722007

版权

学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript" src="scripts/jquery.min.js"></script>
		<style>
			.odd{
				background:#fff38f;
			}
			.even{
				background:#ffffee;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>姓名</th>
					<th>性别</th>
					<th>暂住地</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>张三</td>
					<td>男</td>
					<td>杭州</td>
				</tr>
				<tr>
					<td>李四</td>
					<td>男</td>
					<td>上海</td>
				</tr>
				<tr>
					<td>张起</td>
					<td>女</td>
					<td>杭州</td>
				</tr>
				<tr>
					<td>马武</td>
					<td>男</td>
					<td>北京</td>
				</tr>
				<tr>
					<td>钱吧</td>
					<td>男</td>
					<td>西安</td>
				</tr>
				<tr>
					<td>张就</td>
					<td>男</td>
					<td>杭州</td>
				</tr>
				<tr>
					<td>li</td>
					<td>男</td>
					<td>杭州</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>男</td>
					<td>新疆</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>男</td>
					<td>杭州</td>
				</tr>
				<tr>
					<td>张三</td>
					<td>男</td>
					<td>杭州</td>
				</tr>
			</tbody>
		</table>
	</body>
	<script type="text/javascript">
		$(function(){
			//给tbody中的奇数行添加样式 
			$('tbody>tr:odd').addClass('odd');
			$('tbody>tr:even').addClass('even');
		});
	</script>
</html>