使用jquery实现隔行换色($("tbody tr:odd")获取奇数行和$("tbody tr:even")获取偶数行)以及CSS类操作addClass()的使用

最新推荐文章于 2020-12-20 14:32:17 发布

ginger_mr

最新推荐文章于 2020-12-20 14:32:17 发布

阅读量1.1k

点赞数 1

分类专栏： Callback

本文链接：https://blog.csdn.net/qq_40332952/article/details/104403092

版权

Callback 专栏收录该内容

51 篇文章 2 订阅

订阅专栏

使用jquery实现隔行换色

技术分析

最主要的就是jquery的选择器
获取tbody的奇数行 $(" t b o d y t r : o d d ") 设置背景颜色在获取 t b o d y 的偶数行$ (“tbody tr:even”)设置背景颜色

代码步骤

第一步：引入jquery的类库
第二步：直接写页面加载函数
第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)
第四步：分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。

代码演示一（调用美工写好的样式）

在实际开发中大部分使用的美工写好的样式
下面美工写好的CCS样式代码

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
    background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
	padding-left:25px;
}
.onSuccess{
    background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
	padding-left:25px;
}
.high{
    color:red;
}

  div,span,p {
    width:140px;
    height:140px;
    margin:5px;
    background:#aaa;
	border:#000 1px solid;
    float:left;
    font-size:17px;
    font-family:Verdana;
  }
  div.mini { 
    width:55px;
    height:55px;
    background-color: #aaa;
    font-size:12px;
  }
  div.hide { 
    display:none;
  }

table		{ border:0;border-collapse:collapse;}
td	{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th			{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even		{ background:#FFF38F;}  /* 偶数行样式*/
.odd		{ background:#FFFFEE;}  /* 奇数行样式*/
.selected		{ background:#FF6500;color:#fff;}

jquery代码去调美工写好的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				//使用美工提前写好的样式
				$("tbody tr:even").addClass("even");
				//使用美工提前写好的样式
				$("tbody tr:odd").addClass("odd");	
			});
		</script>
	</head>
	
	<body>
		<table border="1px" align="center">
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>小明</td>
					<td>26</td>
				</tr>
				<tr>
					<td>2</td>
					<td>小方</td>
					<td>25</td>
				</tr>
				<tr>
					<td>3</td>
					<td>小丽</td>
					<td>24</td>
				</tr>
				<tr>
					<td>4</td>
					<td>小肖</td>
					<td>23</td>
				</tr>
				<tr>
					<td>5</td>
					<td>小李</td>
					<td>22</td>
				</tr>
				<tr>
					<td>6</td>
					<td>小王</td>
					<td>21</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

页面效果展示
在这里插入图片描述

代码演示二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				//奇数行设置背景颜色
				$("tbody tr:odd").css("background-color","#FF6500");
				//偶数行设置背景颜色
				$("tbody tr:even").css("background-color","#FFE0E9");
			});
		</script>
	</head>
	
	<body>
		<table border="1px" align="center">
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>小明</td>
					<td>26</td>
				</tr>
				<tr>
					<td>2</td>
					<td>小方</td>
					<td>25</td>
				</tr>
				<tr>
					<td>3</td>
					<td>小丽</td>
					<td>24</td>
				</tr>
				<tr>
					<td>4</td>
					<td>小肖</td>
					<td>23</td>
				</tr>
				<tr>
					<td>5</td>
					<td>小李</td>
					<td>22</td>
				</tr>
				<tr>
					<td>6</td>
					<td>小王</td>
					<td>21</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>