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 相关文章推荐
jQuery代码优化 遍历篇
Nov 01 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
Vue实现简单的拖拽效果
Aug 25 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
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
党支部对照检查材料
2014/08/25 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
财务工作检讨书
2014/10/29 职场文书
立春观后感
2015/06/18 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫