jQuery实践2：隔行改变表格颜色

最新推荐文章于 2024-08-08 15:02:59 发布

sys_song

最新推荐文章于 2024-08-08 15:02:59 发布

阅读量446

点赞数

分类专栏： jQuery 文章标签： jQuery css

本文链接：https://blog.csdn.net/u010278162/article/details/52172454

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

隔一行更改表格样式

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<script type="text/javascript" language="javascript" src="jquery-3.1.0.min.js"></script>
</head>
<style type="text/css">
	body{font-size: 12px;text-align: center;}
	#tab{width: 260px;border: solid 1px #666;background-color: #eee;}
	#tab tr{line-height: 23px;}
	#tab tr th{background-color: #00f;color: #0f0;}
	#tab .trOdd{background-color: #f00;}
</style>
<script type="text/javascript">
		$(function(){
			$("#tab tr:nth-child(even)").addClass("trOdd");
		})
</script>
<body>
	<table id="tab" cellpadding="0" cellspacing="0">
		<tbody>
		<tr>
			<th>姓名</th><th>年龄</th><th>性别</th>
		</tr>
		<tr>
			<td>李二狗</td><td>22</td><td>男</td>
		</tr>
		<tr>
			<td>王一水</td><td>23</td><td>男</td>
		</tr>
		<tr>
			<td>陈四毛</td><td>24</td><td>男</td>
		</tr>
		<tr>
			<td>沈三千</td><td>21</td><td>男</td>
		</tr>
		</tbody>
	</table>
</body>
</html>