jQuery中实现隔行换色

 


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<style type="text/css">
			
		</style>
		<script type="text/javascript">
			$(function(){
				$("#mytable tbody tr:even").css("background-color","aliceblue");
				$("#mytable tbody tr:odd").css("background-color","beige");
			});
			
		</script>
	</head>
	<body>
		
		<table id="mytable" border="0" cellspacing="" cellpadding="10">
			
			<thead>
				<tr>
					<th>收费单位</th><th>付款方式</th><th>结算方式</th><th>状态</th>
				</tr>
			</thead>
			
			<tbody>
				<tr>
					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
				</tr>
				<tr>
					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
				</tr>
				<tr>
					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
				</tr>
				<tr>
					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
				</tr>
				<tr>
					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
				</tr>
				<tr>
					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
				</tr>
			</tbody>
			
			<tfoot>
				<tr><td>统计</td><td>统计</td><td>统计</td><td>统计</td></tr>
			</tfoot>
			
		</table>
		
		<br />
		<br />
		
		<table border="1" cellspacing="1" cellpadding="5">
			<tr>
				<th>收费单位</th><th>付款方式</th><th>结算方式</th><th>状态</th>
			</tr>
			<tr>
				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
			</tr>
			<tr>
				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
			</tr>
			<tr>
				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
			</tr>
			<tr>
				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
			</tr>
			<tr>
				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
			</tr>
			<tr>
				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
			</tr>
			
			
		</table>
		
		
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_40323256/article/details/89283870