jQuery添加类名实现表格的隔行变色

最新推荐文章于 2024-09-14 19:44:09 发布

制冷少年的成长日记

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量143

点赞数 1

分类专栏： JavaScript 文章标签： jquery javascript css

本文链接：https://blog.csdn.net/weixin_53440207/article/details/118603809

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

画一个表格用jQuery添加类名（class）实现隔行，首行，尾行，变色

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.c1{
				background: red;
			}
			.c2{
				background: orange;
			}
			.c3{
				background: yellow;
			}
			.c4{
				background: green;
			}
			
		</style>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
		<script>
			$(function(){
				$("tr:even").addClass("c1");//偶数行加一个列名
				$("tr:odd").addClass("c2");//奇数行加一个列名
				$("tr:first").addClass("c3");//首行加一个列名
				$("tr:last").addClass("c4");//尾行加一个列名
				$("tr:gt(3)").addClass("c4");//索引大于3的加列名
			})
		</script>
	</head>
	<body>
		<table border="1" width="300" height="400">
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			
		</table>
	</body>
</html>