使用JQuery实现隔行变色

最新推荐文章于 2023-11-14 19:48:16 发布

yecats

最新推荐文章于 2023-11-14 19:48:16 发布

阅读量463

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/yecats/article/details/51520010

版权

JQuery 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>使用JQuery实现隔行变色</title>
  <script src="jquery-1.8.0.js"></script>
 </head>
 <style type="text/css">
	body{
		font-size:12px;
		text-align:center;
	}
	#tbStu{
		width:260px;
		border:solid 1px #666;
		background-color:#eee;
	}
	#tbStu tr{
		line-height:23px;
	}
	#tbStu th{
		background-color:#ccc;
		color:#fff;
	}
	#tbStu .trOdd{
		background-color:#f00;
	}
 </style>
 
 <script type="text/javascript">
	$(function(){
		$(function(){
			$("#tbStu tr:nth-child(even)").addClass("trOdd");
		});
	});

 </script>
 <body>
  <table id="tbStu" cellpadding="0" cellspacing="0">
	<tr>
		<th>aaa</th><th>bbb</th><th>ccc</th><th>ddd</th>
	</tr>
	<!-- 奇数 -->
	<tr>
		<td>1001</td><td>1001</td><td>1001</td><td>1001</td>
	</tr>
	<!-- 偶数 -->
	<tr>
		<td>1001</td><td>1001</td><td>1001</td><td>1001</td>
	</tr>
	<!-- 奇数 -->
	<tr>
		<td>1001</td><td>1001</td><td>1001</td><td>1001</td>
	</tr>
	<!-- 偶数 -->
	<tr>
		<td>1001</td><td>1001</td><td>1001</td><td>1001</td>
	</tr>
	<!-- 奇数 -->
	<tr>
		<td>1001</td><td>1001</td><td>1001</td><td>1001</td>
	</tr>
	<!-- 偶数 -->
	<tr>
		<td>1001</td><td>1001</td><td>1001</td><td>1001</td>
	</tr>
  </table>
 </body>
</html>

yecats

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JQuery实现隔行变色

使用JQuery实现隔行变色 body{ font-size:12px; text-align:center; } #tbStu{ width:260px; border:solid 1px #666; background-color:#eee; } #tbStu tr{ line-height:23px; } #tbStu th{ bac
复制链接

扫一扫

专栏目录