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 相关文章推荐
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 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
第十一节--重载
2006/11/16 PHP
测试您的 PHP 水平的题目
2007/05/30 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP对象实例化单例方法
2017/01/19 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
PHP实现计算器小功能
2020/08/28 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
python不带重复的全排列代码
2013/08/13 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
python实现树形打印目录结构
2018/03/29 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
网站开发实习生的自我评价
2013/12/11 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
安全生产学习心得体会
2016/01/18 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书