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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
jquery 问答知识整理
Feb 11 Javascript
javascript getElementsByClassName函数
Apr 01 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
js 函数的副作用分析
Aug 23 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 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
网站当前的在线人数
2006/10/09 PHP
php mysql数据库操作类
2008/06/04 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php如何获取文件的扩展名
2015/10/28 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
JS实现打字游戏
2019/12/17 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
10款最好的Python开发编辑器
2019/07/03 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
python语言是免费还是收费的?
2020/06/15 Python
Django多数据库联用实现方法解析
2020/11/12 Python
C#面试题
2016/05/06 面试题
什么是Web Service?
2012/07/25 面试题
2013年入党人员的自我鉴定
2013/10/25 职场文书
仓管员岗位责任制
2014/02/19 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
打架检讨书范文
2015/01/27 职场文书
未婚证明范本
2015/06/15 职场文书
安全教育培训制度
2015/08/06 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python