jQuery添加類名實(shí)現(xiàn)表格的隔行變色

更新時(shí)間：2021-09-01 11:23:00 來(lái)源：動(dòng)力節(jié)點(diǎn) 瀏覽945次

畫一個(gè)表格用jQuery添加類名(class)實(shí)現(xiàn)隔行，首行，尾行，變色

<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");//偶數(shù)行加一個(gè)列名
				$("tr:odd").addClass("c2");//奇數(shù)行加一個(gè)列名
				$("tr:first").addClass("c3");//首行加一個(gè)列名
				$("tr:last").addClass("c4");//尾行加一個(gè)列名
				$("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>

以上就是動(dòng)力節(jié)點(diǎn)小編介紹的"jQuery添加類名實(shí)現(xiàn)表格的隔行變色"，希望對(duì)大家有幫助，想了解更多可查看 jQuery教程。動(dòng)力節(jié)點(diǎn)在線學(xué)習(xí)教程，針對(duì)沒(méi)有任何Java基礎(chǔ)的讀者學(xué)習(xí),讓你從入門到精通,主要介紹了一些Java基礎(chǔ)的核心知識(shí)，讓同學(xué)們更好更方便的學(xué)習(xí)和了解Java編程，感興趣的同學(xué)可以關(guān)注一下。

jQuery教程