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 相关文章推荐
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
js实现点击烟花特效
Oct 14 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
php获取用户浏览器版本的方法
2015/01/03 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
python实现图片变亮或者变暗的方法
2015/06/01 Python
Python文件及目录操作实例详解
2015/06/04 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
园林毕业生自我鉴定范文
2013/12/29 职场文书
员工培训邀请函
2014/01/11 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
会务接待方案
2014/02/27 职场文书
婚宴邀请函
2015/01/30 职场文书
天河观后感
2015/06/11 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript