使用JQ完成表格隔行换色的简单实例


Posted in Javascript onAugust 25, 2017

1、步骤分析:

第一步:引入jquery的类库

第二步:直接写页面加载函数

第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)

第四步:分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。

2、具体代码实现:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>使用jQuery完成表格隔行换色</title>
  <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
  <script>
   //1.页面加载
   $(function(){
    //2.获取tbody下面的偶数行并设置背景颜色
    $("tbody tr:even").css("background-color","gold");
    //3.获取tbody下面的奇数行并设置背景颜色
    $("tbody tr:odd").css("background-color","pink");
   });
  </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>

3、真正开发时一般CSS样式已经由美工写好,此时可以使用jquery的CSS类操作

具体代码如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>使用jQuery完成表格隔行换色</title>
  <link rel="stylesheet" href="../css/style.css" rel="external nofollow" />
  <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
  <script>
   //1.页面加载
   $(function(){
    //2.获取tbody下面的偶数行并设置背景颜色
    $("tbody tr:even").addClass("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>

在谷歌浏览器内运行,就实现了表格隔行换色的效果。

以上这篇使用JQ完成表格隔行换色的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript几种形式的树结构菜单
May 10 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 #Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 #Javascript
Angular2 组件交互实例详解
Aug 24 #Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 #jQuery
探究react-native 源码的图片缓存问题
Aug 24 #Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 #Javascript
10个最优秀的Node.js MVC框架
Aug 24 #Javascript
You might like
PHP递归调用的小技巧讲解
2013/02/19 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
javascript 播放器 控制
2007/01/22 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
介绍Python的Django框架中的QuerySets
2015/04/20 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
临床医学专业学生的自我评价分享
2013/11/21 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
本科毕业生自荐信
2014/06/02 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
物流业务员岗位职责
2015/04/03 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python