表格的隔行换色

javaScript小主

于 2019-11-24 16:27:17 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/qq_45683093/article/details/103225750

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格的隔行换色</title>
		<script src="jss/jquery-1.3.2.min.js" type="text/javascript"></script>
	</head>
	<body>
		<style>
			.odd{background-color: palegreen;}
			.even{background-color: coral;}
		</style>
		<table border="1" align="center">
			<caption>JavaScript系列图书</caption>
			<thead bgcolor="#B2B2B2" align="center" valign="bottom">
				<tr>
					<th>书名</th>
					<th>出版单位</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td width="185">JavaScript</td>
					<td width="220">吉林省明日科技有限公司</td>
				</tr>
				<tr>
					<td>JavaScript自学</td>
					<td>吉林省明日科技有限公司</td>
				</tr>
				<tr>
					<td>JavaScript程序设计</td>
					<td>吉林省明日科技有限公司</td>
				</tr>
				<tr>
					<td>JavaScript开发基础</td>
					<td>吉林省明日科技有限公司</td>
				</tr>
				<tr>
					<td>JQuery</td>
					<td>吉林省明日科技有限公司</td>
				</tr>
			</tbody>
		</table>
		<script>
			$(function(){
				$("tbody>tr:odd").addClass("odd");            //为表格奇数行添加样式
				$("tbody>tr:even").addClass("even");          //为表格偶数行添加样式
			})
		</script>
	</body>
</html>

javaScript小主

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格的隔行换色

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表格的隔行换色</title> <script src="jss/jquery-1.3.2.min.js" type="text/javascript"></script&gt...
复制链接

扫一扫