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遍历td tr等html元素
Dec 13 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
js基础语法与maven项目配置教程案例
Jul 15 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通用检测函数集合
2011/02/08 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
php实现微信发红包
2015/12/05 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
PHP中常用的魔术方法
2017/04/28 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
python计算N天之后日期的方法
2015/03/31 Python
Python中的XML库4Suite Server的介绍
2015/04/14 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
python开发之list操作实例分析
2016/02/22 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
Django中FilePathField字段的用法
2020/05/21 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
《小草和大树》教学反思
2014/02/16 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python