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 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
layui 给数据表格加序号的方法
Aug 20 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
基于angular实现树形二级表格
Oct 16 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
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中获取文件扩展名的N种方法小结
2012/02/27 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
详解react-redux插件入门
2018/04/19 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
Python 文件重命名工具代码
2009/07/26 Python
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Python判断字符串与大小写转换
2015/06/08 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
Python多线程获取返回值代码实例
2020/02/17 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
您的网上新华书店:文轩网
2016/08/24 全球购物
美国时尚女装在线:Missguided
2016/12/03 全球购物
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
益模软件Java笔试题
2012/03/27 面试题
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python