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 Object与Function使用
Jan 11 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
js分页工具实例
Jan 28 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
实例讲解React 组件
Jul 07 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 变量类型的强制转换
2009/10/23 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
js根据日期判断星座的示例代码
2014/01/23 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
JS实现多选框的操作
2020/06/24 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
python 运算符 供重载参考
2009/06/11 Python
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Python标准异常和异常处理详解
2015/02/02 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
举例说明类变量和实例变量的区别
2016/06/30 面试题
水务局局长岗位职责
2013/11/28 职场文书
儿童生日会策划方案
2014/05/15 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
交通事故协议书范本
2014/11/18 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
导师鉴定意见
2015/06/05 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android