分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

jQuery应用实例2:表格隔行换色

发布时间:2023-09-06 01:40责任编辑:彭小芳关键词:jQuery

这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html

接下来利用上一篇提到的选择器利用jQuery实现:

发现原来多行代码这里只需要两行:

<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>表格隔行换色</title> ???????<script type="text/javascript" src="js/jquery-1.8.3.js" ></script> ???????<script> ???????????$(function(){ ???????????????$("tbody>tr:even").css("background-color","pink"); ???????????????$("tbody>tr:odd").css("background-color","aqua"); ???????????}); ???????</script> ???????????????<style> ???????????????????</style> ???</head> ???<body> ???????<table border="1" width="500" height="50" align="center" 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>
View Code

更好的方式是直接为标签添加类:

<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>表格隔行换色</title> ???????<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> ???????????????<style> ???????????.even{ ???????????????background-color: pink; ???????????} ???????????.odd{ ???????????????background-color: aqua; ???????????} ???????</style> ???</head> ???<body> ???????<table border="1" width="500" height="50" align="center" 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>
View Code

实际开发中是将样式写入css文件中link引入的,

这里为了方便展示写在一个文件中

jQuery应用实例2:表格隔行换色

原文地址:https://www.cnblogs.com/xuyiqing/p/8379863.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved