使用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 相关文章推荐
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 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把大写命名转换成下划线分割命名
2015/04/27 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
input 高级限制级用法
2009/03/26 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
Python进程间通信Queue实例解析
2018/01/25 Python
Python unittest单元测试框架总结
2018/09/08 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
python获取array中指定元素的示例
2019/11/26 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
《故都的秋》教学反思
2014/04/15 职场文书
化验员岗位职责
2015/02/14 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
未婚证明范本
2015/06/15 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript