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 相关文章推荐
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
vue路由跳转传参数的方法
May 06 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
iview实现图片上传功能
Jun 29 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扩展图文教程
2008/12/12 PHP
PHP生成UTF8文件的方法
2010/05/15 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
JavaScript中的值类型转换介绍
2014/12/31 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
党委书记岗位职责
2013/11/24 职场文书
思想品德自我评价
2014/02/04 职场文书
主题实践活动总结
2014/05/08 职场文书
初中班级口号
2014/06/09 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
婚前协议书范本两则
2014/10/16 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
MYSQL 运算符总结
2021/11/11 MySQL
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS