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

2021-09-01 11:23:00
844次极悦

画一个表格用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>

以上就是极悦小编介绍的"jQuery添加类名实现表格的隔行变色"，希望对大家有帮助，想了解更多可查看 jQuery教程。极悦在线学习教程，针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识，让同学们更好更方便的学习和了解Java编程，感兴趣的同学可以关注一下。

上一篇：jQuery选择器返回值下一篇：jQuery判断元素是否存在的方法