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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
vue-cli V3.0版本的使用详解
Oct 24 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
Promise扫盲贴
Jun 24 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 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+mysql 实现身份验证代码
2010/03/24 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
JavaScript 学习笔记(五)
2009/12/31 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
js实现分页功能
2017/05/24 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
解决python写的windows服务不能启动的问题
2014/04/15 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
python 获取图片分辨率的方法
2019/01/08 Python
python实现五子棋人机对战游戏
2020/03/25 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
python 实现视频 图像帧提取
2019/12/10 Python
详解Python多线程下的list
2020/07/03 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
大一新生军训时的自我评价分享
2013/12/05 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
oracle数据库去除重复数据
2022/05/20 Oracle