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 相关文章推荐
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
vue实现拖拽效果
Dec 23 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 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
在JavaScript中调用php程序
2009/03/09 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
laravel安装和配置教程
2014/10/29 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
python 控制语句
2011/11/03 Python
python连接池实现示例程序
2013/11/26 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
Python插件机制实现详解
2020/05/04 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
职工运动会邀请函
2014/01/19 职场文书
合作经营协议书范本
2014/04/17 职场文书
入党介绍人意见范文
2015/06/01 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书