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 相关文章推荐
javascript 面向对象编程 function也是类
Sep 17 Javascript
JS与框架页的操作代码
Jan 17 Javascript
php跨域调用json的例子
Nov 13 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
Angular.js自动化测试之protractor详解
Jul 07 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
javascript实现智能手环时间显示
Sep 18 Javascript
轻松实现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的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
利用PHP实现短域名互转
2013/07/05 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
ThinkPHP控制器详解
2015/07/27 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP调用其他文件中的类
2018/04/02 PHP
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
python检测服务器是否正常
2014/02/16 Python
Python列表计数及插入实例
2014/12/17 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
Python如何合并多个字典或映射
2020/07/24 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
阳光体育活动实施方案
2014/05/25 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
中学校园广播稿
2015/08/18 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python
解析MySQL binlog
2021/06/11 MySQL
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang