隔行换色

最新推荐文章于 2021-03-29 09:41:49 发布

程序小白222222

最新推荐文章于 2021-03-29 09:41:49 发布

阅读量135

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq1424035130/article/details/84834164

本文介绍了一个商品分类管理系统的设计，包括手机数码、电脑办公、鞋靴箱包和家居饰品四大类商品的详细分类及其操作功能，如修改和删除。系统通过表格形式展示了各类商品的ID、名称和描述，并提供了美观的界面设计。

<table id="tab1" border="1" width="800" align="center" >
			<tr style="background-color: #999999;">
				<th>分类ID</th>
				<th>分类名称</th>
				<th>分类描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>1</td>
				<td>手机数码</td>
				<td>手机数码类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>2</td>
				<td>电脑办公</td>
				<td>电脑办公类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>3</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>4</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
		</table>


<style type="text/css">
			.odd{
				background-color: #BCD68D;
			}
			
			.even{
				background-color: #FFFFCC;
			}
		</style>

	<script type="text/javascript">
		$(function(){
			/* $("tr:odd").css("background-color","#BCD68D");
			$("tr:even").css("background-color","#FFFFCC"); */
			
			//tr:gt(0) 选择前0+1个之后的所有元素
			$("tr:gt(0):odd").css("background-color","#BCD68D");
			$("tr:gt(0):even").css("background-color","#FFFFCC");

//使用addClass、remove添加或移除样式
$("tr:gt(0):odd").addClass("odd");
		$("tr:gt(0):even").addClass("even");
		})
	</script>