jQuery实现表格奇偶行显示不同背景色 就这么简单


Posted in Javascript onMarch 13, 2017

做表格的时候,经常要让奇偶行显示不同背景色,一来使表格显得更美观,二来使同行数据查找更快捷方便。通常我们是怎么实现的呢?就是在每个tr标签上加css样式。

代码如下所示:

<html>
<style type="text/css">
.odd {
 background-color:yellow;
}

.even {
 background-color:red;
}
</style>


<body> 
<table border="1">
 <tr class="odd">
  <td>No.1</td>
  <td>0001</td>
 </tr>
 <tr class="even">
  <td>No.2</td>
  <td>0002</td>
 </tr>
 <tr class="odd">
  <td>No.3</td>
  <td>0003</td>
 </tr >
 <tr class="even">
  <td>No.4</td>
  <td>0004</td>
 </tr>
</table>
</body> 
</html>

显示效果:

jQuery实现表格奇偶行显示不同背景色 就这么简单

但是假设表格有上百行甚至上千行,同时不允许修改后台代码,只能修改前台页面,这样的话每个tr元素都加css样式就比较费劲了。有什么办法可以用最简洁的方式,达到同样的页面效果呢?答案就是JQuery。

JQuery对标签的控制实在是太强大了,你可以通过选择器找到页面上任意一个标签,同时为该标签添加CSS样式。

只需要引入JQuery的库文件,再添加以下四行代码就OK了。

$(document).ready(function() {
 $('tr:odd').addClass('odd');
 $('tr:even').addClass('even');
});

■简单解释一下选择器的用法:

$(‘tr')代表遍历选择页面上所有tr元素
$(‘tr:odd')代表遍历选择页面上所有tr元素的奇数行,请注意tr元素下标是以0开始的,tr[1]为奇数行。
$(‘tr:even')代表遍历选择页面上所有tr元素的偶数行,请注意tr元素下标是以0开始的,tr[0]为偶数行。

修改后的完整代码:

<html>

<style type="text/css">
.odd {
 background-color:yellow;
}

.even {
 background-color:red;
}
</style>

<script language=JavaScript src="js/jquery.min.js" type=text/javascript></script>
<script>
$(document).ready(function() {
 $('tr:odd').addClass('odd');
 $('tr:even').addClass('even');
});
</script>

<body> 
<table border="1">
 <tr>
  <td>No.1</td>
  <td>0001</td>
 </tr>
 <tr>
  <td>No.2</td>
  <td>0002</td>
 </tr>
 <tr>
  <td>No.3</td>
  <td>0003</td>
 </tr>
  <tr>
  <td>No.4</td>
  <td>0004</td>
 </tr>
</table>
</body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
轻松实现jQuery添加删除按钮Click事件
Mar 13 #Javascript
jQuery+CSS3实现点赞功能
Mar 13 #Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 #Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 #Javascript
常用的几个JQuery代码片段
Mar 13 #Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 #Javascript
jquery实现表单获取短信验证码代码
Mar 13 #Javascript
You might like
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
使用python实现rsa算法代码
2016/02/17 Python
Django中Model的使用方法教程
2018/03/07 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
Python基于百度云文字识别API
2018/12/13 Python
python入门之基础语法学习笔记
2020/02/08 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
python安装sklearn模块的方法详解
2020/11/28 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
客户接待方案
2014/02/26 职场文书
艾滋病宣传标语
2014/06/25 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
会议欢迎词
2015/01/23 职场文书
党内外群众意见范文
2015/06/02 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
七个Python必备的GUI库
2021/04/27 Python
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis