jQuery表格插件（隔行换色、划过变色、全选）

最新推荐文章于 2021-06-29 22:52:35 发布
最新推荐文章于 2021-06-29 22:52:35 发布
阅读量795 收藏
点赞数
分类专栏： ASP.NET
javascript JavaScript Javascript jquery jQuery JQUERY Jquery JQuery jquery表格插件
[javascript]  view plain copy
  1. //by:xcl @2012.8  qq:80213876  
  2. ;(function ($) {   
  3.     $.extend({  
  4.         XCLTableList:function(options){  
  5.             options = $.extend({},funs.Defaults, options);  
  6.             funs.Init(options);  
  7.             $(options.tableClass).each(function(){  
  8.                 $trs=null;  
  9.                 if($(this).children("tbody").length>0){//浏览器会自动加tbody标签  
  10.                     $trs=options.trNoHoverClass==""?$(this).children().children():$(this).children().children().not(options.trNoHoverClass);  
  11.                 }else{  
  12.                     $trs=options.trNoHoverClass==""?$(this).children():$(this).children().not(options.trNoHoverClass);  
  13.                 }  
  14.                 //滑过行颜色  
  15.                 if(options.trHoverColor!=""){  
  16.                     $trs.hover(function(){  
  17.                         $(this).addClass("XCLTableList_trHover");  
  18.                     },function(){  
  19.                         $(this).removeClass("XCLTableList_trHover");  
  20.                     });  
  21.                 }  
  22.                 //单击行颜色  
  23.                 if(options.trClickColor!=""){  
  24.                     $trs.click(function(){  
  25.                         $trs.removeClass("XCLTableList_trClick");  
  26.                         $(this).addClass("XCLTableList_trClick");  
  27.                     });  
  28.                 }  
  29.                 //奇偶行颜色  
  30.                 if(options.trEvenColor!=""){  
  31.                     $trs.each(function(i){  
  32.                         if(i%2==0){  
  33.                             $(this).addClass("XCLTableList_trEven");  
  34.                         }  
  35.                     });  
  36.                 }  
  37.                 if(options.trOddColor!=""){  
  38.                    $trs.each(function(i){  
  39.                         if(i%2==1){  
  40.                             $(this).addClass("XCLTableList_trOdd");  
  41.                         }  
  42.                     });  
  43.                 }  
  44.                 /******表格样式相关结束****/  
  45.   
  46.   
  47.                 /******全选相关开始*****/  
  48.                 //单击全选时  
  49.                 $(options.checkAllClass).click(function(){  
  50.                     $ckAll=$(this).closest(options.tableClass).find(options.checkAllClass);  
  51.                     $ckItem=$(this).closest(options.tableClass).find(options.checkItemClass);  
  52.                     if(this.checked){  
  53.                         $ckItem.attr({"checked":true});  
  54.                     }else{  
  55.                         $ckItem.attr({"checked":false});  
  56.                     }  
  57.                     funs.GetCheckBoxIDs($ckAll,$ckItem);  
  58.                 });  
  59.                 //单击列表中的checkbox时  
  60.                 $(options.checkItemClass).click(function(){  
  61.                     $ckAll=$(this).closest(options.tableClass).find(options.checkAllClass);  
  62.                     $ckItem=$(this).closest(options.tableClass).find(options.checkItemClass);  
  63.                     var flag=1;  
  64.                     $ckItem.each(function(){  
  65.                         if(!this.checked){  
  66.                             flag=0;  
  67.                             return false;  
  68.                         }  
  69.                     });  
  70.                     if(flag==1){  
  71.                         $ckAll.attr({"checked":true});  
  72.                     }else{  
  73.                         $ckAll.attr({"checked":false});  
  74.                     }  
  75.                     funs.GetCheckBoxIDs($ckAll,$ckItem);  
  76.                 });  
  77.                 /******全选相关结束*****/  
  78.   
  79.             });  
  80.         }  
  81.     });  
  82.     var funs={  
  83.         Defaults:{  
  84.             tableClass:".tableList",//table的class  
  85.             trHoverColor:"#eee",//行滑过时的颜色  
  86.             trClickColor:"",//单击行后的颜色  
  87.             trNoHoverClass:".noHover",//无需设置颜色的行class  
  88.             trEvenColor:"#ecf7fb",//偶数行的颜色0开始  
  89.             trOddColor:"#fff",//奇数行的颜色  
  90.             checkAllClass:".checkAll",//全选按钮class  
  91.             checkItemClass:".checkItem",//选择框的class  
  92.             checkedTrColor:"#fffec9"//选中行的颜色  
  93.         },  
  94.         Init:function(options){  
  95.             //样式  
  96.             $("head").append("<style type='text/css'>.XCLTableList_trHover{background:"+options.trHoverColor+"!important;} "+  
  97.                                     ".XCLTableList_trClick{background:"+options.trClickColor+"!important;} "+  
  98.                                     ".XCLTableList_trEven{background:"+options.trEvenColor+";} "+  
  99.                                     ".XCLTableList_trOdd{background:"+options.trOddColor+";}"+  
  100.                                     ".XCLTableList_trChecked{background:"+options.checkedTrColor+"!important;}"+  
  101.                                     "</style>");  
  102.             //当子项都为选中时，此时选中全选项  
  103.             $(options.tableClass).each(function(){  
  104.                     $ckAll=$(this).closest(options.tableClass).find(options.checkAllClass);  
  105.                     $ckItem=$(this).closest(options.tableClass).find(options.checkItemClass);  
  106.                     var isAllChecked=1;  
  107.                     $ckItem.each(function(){  
  108.                         if(!this.checked){  
  109.                             isAllChecked=0;return false;  
  110.                         }  
  111.                     });  
  112.                     if(isAllChecked==1){  
  113.                         $ckAll.attr({"checked":true});  
  114.                     }  
  115.             });  
  116.         },  
  117.         //将列表中的checkbox的value的数组形式存到全选的checkbox的value中  
  118.         GetCheckBoxIDs:function(ckAll,ckItem){  
  119.             var v=[];  
  120.             ckItem.each(function(){  
  121.                 if(this.checked){  
  122.                     $(this).closest("tr").addClass("XCLTableList_trChecked");  
  123.                     v.push(this.value);  
  124.                 }else{  
  125.                     $(this).closest("tr").removeClass("XCLTableList_trChecked");  
  126.                 }  
  127.             });  
  128.             ckAll.val(v.toString());  
  129.         }  
  130.     }  
  131. })(jQuery);  


使用说明
  • $.XCLTableList({options:optionsValue});
使用示例

[html]  view plain copy
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.  <script type="text/javascript" src="jquery.js"></script>  
  5.  <script type="text/javascript" src="table.js"></script>  
  6.   
  7.  </head>  
  8.   
  9.  <body>  
  10.   <table class="tableList">  
  11.     <tr>  
  12.         <td><input type="checkbox" value="" class="checkAll"/></td>  
  13.         <td></td>  
  14.         <td></td>  
  15.     </tr>  
  16.     <tr>  
  17.         <td><input type="checkbox" value="1" class="checkItem"/></td>  
  18.         <td>aaa</td>  
  19.         <td>bbb</td>  
  20.     </tr>  
  21.     <tr>  
  22.         <td><input type="checkbox" value="2" class="checkItem"/></td>  
  23.         <td>aaa</td>  
  24.         <td>bbb</td>  
  25.     </tr>  
  26.     <tr>  
  27.         <td><input type="checkbox" value="3" class="checkItem"/></td>  
  28.         <td>aaa</td>  
  29.         <td>bbb</td>  
  30.     </tr>  
  31.     <tr>  
  32.         <td><input type="checkbox" value="4" class="checkItem"/></td>  
  33.         <td>aaa</td>  
  34.         <td>bbb</td>  
  35.     </tr>  
  36.   </table>  
  37.  </body>  
  38.  <script type="text/javascript">  
  39. var funs={  
  40.     Init:function(){  
  41.         $.XCLTableList();  
  42.     }  
  43. };  
  44. $(function(){  
  45.     funs.Init();  
  46. });  
  47.  </script>  
  48. </html>  
macrohui29
关注
专栏目录
jQuery实现表格的隔行换色
lihui4291的博客
05-26 803
表格行间隔行用不同颜色表示,便于信息浏览,同时具有鼠标经过行高亮效果. 传统的做法：在tr里加 onMouseOver="this.className='two'" onMouseOut="this.className='one'" 那么使用jquery怎么做呢？ 引入jquery.js文件: JS代码如下： $(document).ready(function(){
我的第一个jQuery插件--表格隔行变色
04-24 175
虽然网上有大量的插件供我们去使用，但不一定有一款适合你的，必要的时候还是要自己动手去敲的。下面，开始我的第一个插件... 参考《锋利的JQuery》，JQuery为开发插件增设了俩个方法：$.extend(object), $.fn.extend(object). 这篇博文对插件制作的讲解挺好的，就是有点长，但值得玩味：http://blog.csdn.net/guorun18/ar...
用JQuery实现表格隔行换颜色
热门推荐
suntanyong88的专栏
09-20 2万+
最近在学习Jquery，其实很多论坛中都有一个特点就是每张贴都是隔行换颜色的，相信这点大家可能发现。那么怎样实现这种功能呢。方法有3种：     方法一：使用CSS样式，定义两个类的样式，分别使用到表格中。这种方法想法简单，相信很多人都想到。但是这样做很麻烦，如果表格很多工作量
jQuery插件--表格隔行变色
weixin_34273479的博客
06-21 140
插件分俩种：·类级别组件开发： ---即给JQuery命名空间下添加新的全局函数，也称静态方法。形式如下：jQuery.myPlugin=function(){//dosomething};例如：$.ajax(options); $.type();·对象级别组件开发 ---挂在JQuery原型下的方法，通...
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
10-27
在这个实例中，我们将探讨使用jQuery来实现一个具有隔行换色、全选和鼠标滑过当前行效果的列表。通过这个实例，我们能学习到如何操作DOM元素、如何使用jQuery的事件处理器以及如何为元素添加和切换CSS类。 ### 隔行...
jQuery展示表格点击变色、全选、删除
10-20
总结来说，这个示例利用jQuery实现了一个具有交互性的表格，包括行点击变色以突出显示选中行、图片的悬停放大效果，以及全选表格的机制。尽管没有涵盖具体的删除功能，但提供了基础框架，只需稍加扩展即可实现删除...
表格隔行换色 鼠标移过变色
09-06
"表格隔行换色 鼠标移过变色"是两种常见的表格样式优化手段，它们可以使得表格内容更易于阅读，同时提升用户体验。在JavaScript（JS）的帮助下，我们可以轻松实现这些效果。 1. **隔行换色**： 隔行换色通常使用...
一天搞定jQuery(二)——使用jQuery表格的隔行换色
05-10
一天搞定jQuery(二)——使用jQuery表格的隔行换色
使用jQuery完成表格隔行换色
HuashirenYty的博客
10-26 280
jqColors.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色</title> <script type="text/javascript" src="../js/jquery-1...
jquery中tablesorter隔行颜色变化以及对应表格拖拽技术
03-01
jquery的表格排序和表格行排序以及表格行拖动功能以及拖动以后仍然保持隔行颜色变化 博文链接：https://dandansdu.iteye.com/blog/239412
jquery选取商品隔行变色
09-22
jquery选取商品隔行变色
全选反选复选框JS实现
07-29
包含两种通过JS方式实现的常用 全选反选复选框
基于Jquery的表格隔行换色，移动换色，点击换色插件
柳岸花明
12-20 875
http://blog.sina.com.cn/s/blog_64d8a1d00100gzqg.html这个是首发这个插件的王老师的博客。
jQuery实现表格隔行变色案例
qq_42918876的博客
06-29 1731
jQuery实现表格隔行变色案例html结构js代码部分效果如图 其实挺简单的，思路就是，创建一个table，然后给偶数行和奇数行赋不同背景颜色。 html结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
jquery实现隔行变色效果
全世界的屋顶
03-20 1309
简单各行变色 //使用jquery加载事件 $(document).ready(function (){ var oldcolor; $("tr").each(function (index,domEle){ if(index%2==0){ //设置偶数行的背景颜色 $(domEle).css("background","#ffff99"); }else
jQuery实现HTML表格隔行变色及鼠标悬停变色效果
hftyhv的博客
11-15 581
jQuery实现HTML表格隔行变色及鼠标悬停变色效果
jquery表格隔行变色插件
weixin_30457551的博客
10-21 138
//插件代码;(function($){ $.fn.extend({ "alterBgColor":function(options){ options = $.extend({ "odd":"odd",//偶数行的class "even":"even",//奇数行clas...
jQuery实现table表格隔行换色鼠标经过变色
席伟娜的专栏
03-19 4646
//初学者可以看下挺简单的实现方法 隔行变色 .one{ background:#C00; } .two{ background:#09F; } .three{ background:#039; } .four{ background:#FFF; } $(document).ready(function(){ $("tr").mous
自定义jQuery表格插件：实现动态加载与多项功能
"创建自己的jquery表格插件，模仿easyui的dataGrid，实现动态加载、自动分页、全选功能，以及鼠标悬浮和隔行变色的视觉效果。需要通过iis部署以查看完整效果。提供了相关的CSS样式代码用于表格布局和美化。" 在Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值