首页 > 代码库 > jQuery组件开发之表格隔行选中效果实现

jQuery组件开发之表格隔行选中效果实现

一.效果展示如下

技术分享

jQuery组件之表格插件源码

 1  //表格选中插件
 2 //方式一
 3 (function($){
 4     var chosTabBgColor = function(options){
 5             //设置默认值
 6             var options = $.extend({
 7                 odd:"odd", //奇数
 8                 even:"even",//偶数
 9                 selected:"selected"
10             },options);
11             
12             $("tbody tr:odd", this).addClass(options.odd);
13             $("tbody tr:even", this).addClass(options.even);
14             //判定是否选中
15             var hasSelected = $("tbody tr").hasClass("selected");
16             $("tbody>tr", this).click(function(){
17                 var $that = $(this);
18                 //判断是否选中
19                 var hasSelected = $that.hasClass(options.selected);
20                 //如果选中,则移除selected类,否则添加selected类
21                 $that[hasSelected ? "removeClass" : "addClass"](options.selected)
22                 //查找内部的checkbox,并设置其属性
23                 .find("[type=checkbox]").attr("checked",!hasSelected);
24             });
25             
26             // 如果单选框默认情况下是选择的,则高色.
27             $("tbody>tr:has(:checked)", this).addClass(options.selected);
28     }
29     $.fn.chosTabBgColor = chosTabBgColor;
30 })(jQuery)
31  //方式二
32 /*(function($){
33     $.fn.extend({
34         "chosTabBgColor":function(options){
35             //设置默认值
36             var options = $.extend({
37                 odd:"odd", //奇数
38                 even:"even",//偶数
39                 selected:"selected"
40             },options);
41             
42             $("tbody tr:odd", this).addClass(options.odd);
43             $("tbody tr:even", this).addClass(options.even);
44             //判定是否选中
45             var hasSelected = $("tbody tr").hasClass("selected");
46             $("tbody>tr", this).click(function(){
47                 var $that = $(this);
48                 //判断是否选中
49                 var hasSelected = $that.hasClass(options.selected);
50                 //如果选中,则移除selected类,否则添加selected类
51                 $that[hasSelected ? "removeClass" : "addClass"](options.selected)
52                 //查找内部的checkbox,并设置其属性
53                 .find("[type=checkbox]").attr("checked",!hasSelected);
54             });
55             
56             // 如果单选框默认情况下是选择的,则高色.
57             $("tbody>tr:has(:checked)", this).addClass(options.selected);
58             
59             return this;//返回链式调用
60         }
61     });
62 })(jQuery)*/

html源码

技术分享
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>表格选中插件</title>
 6         <style>
 7             html {
 8                 font-family: "微软雅黑";
 9             }
10             .table {
11                 width: 60%;
12                 border-collapse: collapse;
13                 border: 0;
14             }
15             .table tr th, tr td {
16                 border: solid 1px #cecece;
17                 padding: 8px 10px;
18                 text-align: left;
19             }
20             .bg-00A5FF {
21                 background-color: #088c78;
22                 color: #fff;
23             }
24             .table tr {
25                 cursor: pointer;
26             }
27             .even { background:#c7c7c7; color: #fff;}  /* 偶数行样式*/
28             .odd { background:#FFFFFF; }  /* 奇数行样式*/
29             .selected { background:#00a1d4; color:#E91E63;}
30         </style>
31        
32        <script type="text/javascript" src=http://www.mamicode.com/"js/lib/jquery-3.1.1.min.js" ></script>
33        <!-- 作者:zhangjaingfeng 时间:2016-11-10 描述:表格选择chosTab组件 -->
34        <script type="text/javascript" src=http://www.mamicode.com/"js/chosTab.js" ></script>
35        <script type="text/javascript">
36             $(function(){
37                 $(".table").chosTabBgColor({});
38             })
39         </script>
40     </head>
41     <body>
42         <table class="table" cellpadding="0" cellspacing="0" border="0">
43             <colgroup>
44                 <col width="10%"/>
45                 <col width="30%"/>
46                 <col width="30%"/>
47                 <col width="30%"/>
48             </colgroup>
49             <thead class="bg-00A5FF">
50                 <tr>
51                     <th>请选择</th>
52                     <th>姓名</th>
53                     <th>性别</th>
54                     <th>暂住地</th>
55                 </tr>
56             </thead>
57             <tbody>
58                 <tr class="">
59                     <td><input type="checkbox" name=""/></td>
60                     <td>Ulin</td>
61                     <td>男</td>
62                     <td>成都市高新区新怡华园</td>
63                 </tr>
64                 <tr>
65                     <td><input type="checkbox" name=""/></td>
66                     <td>Ylin</td>
67                     <td>男</td>
68                     <td>成都市高新区新怡华园</td>
69                 </tr>
70                 <tr>
71                     <td><input type="checkbox" name=""/></td>
72                     <td>Flin</td>
73                     <td>男</td>
74                     <td>成都市高新区新怡华园</td>
75                 </tr>
76                 <tr>
77                     <td><input type="checkbox" name=""/></td>
78                     <td>Alin</td>
79                     <td>男</td>
80                     <td>成都市高新区新怡华园</td>
81                 </tr>
82             </tbody>
83         </table>
84     </body>
85 </html>
View Code

 

jQuery组件开发之表格隔行选中效果实现