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 相关文章推荐
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
vue2单元测试环境搭建
May 24 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 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
NOT NULL 和NULL
2007/01/15 PHP
PHP类中Static方法效率测试代码
2010/10/17 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
Python匿名函数及应用示例
2019/04/09 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
Python文件操作函数用法实例详解
2019/12/24 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
机电专业毕业生推荐信
2013/11/10 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
详解MongoDB的条件查询和排序
2021/06/23 MongoDB