jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016-02-25 00:00
1176 查看
本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法。分享给大家供大家参考,具体如下:
此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示。整体代码如下:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
jQuery 表格隔行变色代码[修正注释版]
jQuery实现简单隔行变色的方法
jQuery隔行变色与普通JS写法的对比
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
jQuery 行背景颜色的交替显示(隔行变色)实现代码
JQuery文本框高亮显示插件代码
jquery实现带复选框的表格行选中删除时高亮显示
jquery实现带单选按钮的表格行选中时高亮显示
JQuery操作表格(隔行着色,高亮显示,筛选数据)
此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示。整体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表格隔行变色且鼠标滑过高亮显示</title> <style> table{border-collapse:collapse;border:none;width:20%;} table tr td{border:1px solid #ccc;text-align:center;cursor:pointer;} .evenRow{background:#f0f0f0;} .oddRow{background:#ff0;} .activeRow{background:#f00;color:#fff;} </style> <script type="text/javascript" src="jquery-1.7.1.js"></script> </head> <body> <script> /* * tableUI 0.1 * 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替,鼠标移上高亮显示 * Dependence jquery-1.7.1.js */ ;(function($){ $.fn.tableUI = function(options){ //经常用options表示有许多个参数 //各种属性、参数 创建一些默认值,拓展任何被提供的选项 var defaults = { evenRowClass:"evenRow", oddRowClass:"oddRow", activeRowClass:"activeRow" }; var obj = $.extend(defaults,options); this.each(function(){ //this关键字代表了这个插件将要执行的jQuery对象 此处没有必要将this包在$号中如$(this),因为this已经是一个jQuery对象。 $(this)等同于 $($('#element')); //插件实现代码 var thisTable = $(this); //获取当前对象 此时this关键字代表一个DOM元素 我们可以alert打印出此时的this代表的是object HTMLTableElement //添加奇偶行颜色 $(thisTable).find("tr:even").addClass(obj.evenRowClass); $(thisTable).find("tr:odd").addClass(obj.oddRowClass); //添加活动行颜色 $(thisTable).find("tr").mouseover(function(){ $(this).addClass(obj.activeRowClass); }); $(thisTable).find("tr").mouseout(function(){ $(this).removeClass(obj.activeRowClass); }); }); }; })(jQuery); //在这个封闭程序中,我们可以无限制的使用$符号来表示jQuery函数。 </script> <table cellpadding="0" cellspacing="0"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> <script> $(function(){ $("table").tableUI(); }) </script> </body> </html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
用JQuery实现表格隔行变色和突出显示当前行的代码jQuery 表格隔行变色代码[修正注释版]
jQuery实现简单隔行变色的方法
jQuery隔行变色与普通JS写法的对比
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
jQuery 行背景颜色的交替显示(隔行变色)实现代码
JQuery文本框高亮显示插件代码
jquery实现带复选框的表格行选中删除时高亮显示
jquery实现带单选按钮的表格行选中时高亮显示
JQuery操作表格(隔行着色,高亮显示,筛选数据)
相关文章推荐
- jQuery使用zTree插件实现树形菜单和异步加载
- jQuery iScroll.js 移动端滚动条美化插件第1/5页
- Jquery读取返回的JSON数据
- 用jquery给元素动态绑定事件及样式
- jquery 绘图工具 flot 学习笔记
- 造轮子:JQuery实现ajax跨域
- 移动web开发前准备知识了解(html5、jquery)笔记
- jquery中如何防止冒泡事件
- jQuery之获取标签
- jQuery之#id选择器
- jQuery显示隐藏密码插件jquery.toggle-password演示
- JQuery面试题答案
- jQuery多次选中checkbox失效
- jQuery多次选中checkbox失效
- 轻巧的jQuery提示框插件Tipso演示
- 使用jquery-mockjax模拟ajax请求做前台測试
- jquery获取和失去焦点改变样式
- 微信iOS端无法执行jquery on()方法
- JQuery中的html(),text(),val()区别
- jquery easyui datagrid 加载成功,选中某一行