jq实现表格隔行换色

最新推荐文章于 2021-08-22 22:37:02 发布
最新推荐文章于 2021-08-22 22:37:02 发布
阅读量216 收藏
点赞数
分类专栏： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxm809/article/details/108421909
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用jQuery完成表格隔行换色</title>
		<link rel="stylesheet" href="../css/style.css" />
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			//1.页面加载
			$(function(){
				/*//2.获取tbody下面的偶数行并设置背景颜色
				$("tbody tr:even").css("background-color","yellow");
				//3.获取tbody下面的奇数行并设置背景颜色
				$("tbody tr:odd").css("background-color","green");*/
				
				//2.获取tbody下面的偶数行并设置背景颜色
				$("tbody tr:even").addClass("even");
				$("tbody tr:even").removeClass("even");
				//3.获取tbody下面的奇数行并设置背景颜色
				$("tbody tr:odd").addClass("odd");
			});
		</script>
		
	</head>
	<body>
		<table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr >
					<td>1</td>
					<td>张三</td>
					<td>22</td>
				</tr>
				<tr >
					<td>2</td>
					<td>李四</td>
					<td>25</td>
				</tr>
				<tr >
					<td>3</td>
					<td>王五</td>
					<td>27</td>
				</tr>
				<tr >
					<td>4</td>
					<td>赵六</td>
					<td>29</td>
				</tr>
				<tr >
					<td>5</td>
					<td>田七</td>
					<td>30</td>
				</tr>
				<tr >
					<td>6</td>
					<td>汾九</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

style.css 

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;}

 

dxm809
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用JQ完成表格的隔行换色
qq_42675691的博客
08-21 267
使用JQ完成表格的隔行换色 需求分析: 在我们的实际开发过程中,我们的表格如果所有的行都是一样的话,很容易看花眼,所以我们需要让我们的表格隔行换色 技术分析: 获取所有行 table.rows 遍历所有行 根据行号去修改每一行的背景颜色: bgColor ​ style.backgroundColor = “red” 步骤分析: 导入JQ的包 文档加载完成函数: 页面初始化 获得所有的行 : ...
js实现表格隔行换色
m0_61841946的博客
10-07 310
首先创建一个表格，用来看效果 <table border="1" cellspadding="0"> <tr> <td>表头</td> <td>表头</td> <td>表头</td> <td>表头</td> &
JQuery表格的隔行换色
mqingo的博客
11-20 194
01JQuery表格的隔行换色.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;01表格的隔行换色&lt;/title&gt; &lt;script type="text/javascript" src=&q
jQuery隔行换色
ahao4311的博客
02-20 283
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-2.1.0.min.js"></s...
使用jQuery完成隔行换色
03-09 200
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色</title> <link rel="stylesheet" href="../css/style.css" ...
Jquery操作层级选择器
weixin_30552811的博客
06-10 55
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>层级选择器</title> <link rel="stylesheet" type="text/css" href="../../c...
使用JQ完成表格隔行换色的简单实例
12-02
总的来说，通过jQuery实现表格隔行换色是前端开发中常见的一种优化手段。它利用了jQuery的选择器功能和CSS的类应用，使得代码更简洁，同时提高了可维护性。在实际项目中，可以根据需求选择直接使用JavaScript设置...
jQuery实现表格隔行换色
12-11
本文实例为大家分享了jQuery实现表格隔行换色的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用JQ完成表格隔行换色</...
jquery实现表格隔行变色
LHH201016的博客
08-22 1879
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变色表格</title> <script src="jquery-3.6.0.js"></script> </head> <body> <table b...
jquery实现表格隔行换色效果
01-19
本文实例讲述了jquery实现表格隔行换色效果的代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： 1、新建一个web项目，jQuery； 2、在WebContent目录下新建script文件夹，将jquery-1.10.1....
jquery 隔行换色
11-12
jquery 隔行换色特效 很简单 看下代码就会了 里面有2个例子
jquery 实现隔行换色
09-09
jquery 实现隔行换色 不错sd sf sdf sdf
JQuery 隔行换色
七七的博客
06-14 215
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行换色</title> <script src="js/jquery-3.4.1.min.js"></script> <script> //将数据奇数行背景色设置为pink，偶数行设置为yellow
Jquery-隔行换色
叶为正的博客
06-12 305
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>隔行换色</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript">
jquery隔行变色
qq_42309685的博客
08-15 515
隔行变色 效果如下： CSS部分 <style> ul { list-style: none; color: #fff; } ul li { margin: 5px; } </style> body部分 <script src="lib/jquery/jquery-3.4.1.min.js"></script>...
jQuery实现隔行换色
东城庞太师
12-19 277
jQuery实现隔行换色 效果图如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.3.1.js" type="text/jav...
jquery实现隔行换色
lmw的专栏
04-23 641
$(document).ready(function(){ $("#tab tr:even").css("background","red"); $("#tab tr:odd").css("background","blue"); }); 第一行第一行 第一行第一行 第一行第一行 第一行第一行 第一行第一行
JQuery——实现隔行换色
Melonico的博客
07-01 3460
基础页面显示 页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行换色</title> <script src="jquery-3.5.1.js"></script> <style> table{ margin: auto;
JQ实现点击按钮更换图片
最新发布
05-31
可以使用以下 jQuery 代码实现： ```html <!DOCTYPE html> <html> <head> <title>更换图片</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#myImage").attr("src", function(index, attr){ return attr.match("pic1") ? "pic2.jpg" : "pic1.jpg"; }); }); }); </script> </head> <body> <img id="myImage" src="pic1.jpg" width="200" height="200"> <br> <button>更换图片</button> </body> </html> ``` 其中，`$(document).ready()` 函数用于在页面加载完成后执行代码。`$("button").click()` 函数用于绑定按钮的点击事件。`$("#myImage").attr()` 函数用于获取或设置元素的属性，其中第一个参数为属性名，第二个参数为一个函数，该函数接受两个参数：当前元素在集合中的索引和当前属性的值。函数返回值将成为新的属性值。通过匹配当前图片的 `src` 属性，来判断应该显示哪一张图片。最后，更新图片的 `src` 属性，显示更换后的图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值