jQuery实现隔行背景色变色


Posted in Javascript onNovember 24, 2014

隔行变色有很多中方法来实现,之前我都是直接将判断代码写在程序中,今天我们来使用jQuery实现,代码奉上~

jQuery代码:

       $(function(){ 

            var item = $("tr"); 

            for(var i=0;i<item.length;i++){ 

                if(i%2==0){ 

                    item[i].style.backgroundColor="#888"; 

                } 

            } 

            //$("#tb tbody tr:even").css("backgroundColor","#888"); 

  

        });

HTML代码:

    <table id='tb'> 

        <tbody> 

            <tr><td>第一行</td><td>第一行</td></tr> 

            <tr><td>第二行</td><td>第2行</td></tr> 

            <tr><td>第三行</td><td>第3行</td></tr> 

            <tr><td>第4行</td><td>第4行</td></tr> 

            <tr><td>第5行</td><td>第5行</td></tr> 

            <tr><td>第6行</td><td>第6行</td></tr> 

        </tbody> 

    </table>

是不是很好玩,小伙伴们其实可以用jQuery实现很多好玩的东西的,大家自由发挥吧

Javascript 相关文章推荐
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
koa源码中promise的解读
Nov 13 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
jQuery实现统计复选框选中数量
Nov 24 #Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 #Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 #Javascript
基于jQuery实现下拉框
Nov 24 #Javascript
基于jQuery实现表单提交验证
Nov 24 #Javascript
jQuery简单实现网页选项卡特效
Nov 24 #Javascript
jQuery选择器全集详解
Nov 24 #Javascript
You might like
dedecms系统常用术语汇总
2007/04/03 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
javascript html 静态页面传参数
2009/04/10 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python unittest实现api自动化测试
2018/04/04 Python
Django工程的分层结构详解
2019/07/18 Python
python3 实现口罩抽签的功能
2020/03/11 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
linux面试题参考答案(8)
2016/04/19 面试题
手术室护士个人总结
2015/02/13 职场文书
高中运动会前导词
2015/07/20 职场文书
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
你知道Java Spring的两种事务吗
2022/03/16 Java/Android
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技