一.效果展示如下
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 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="js/lib/jquery-3.1.1.min.js" ></script> 33 <!-- 作者：zhangjaingfeng 时间：2016-11-10 描述：表格选择chosTab组件 --> 34 <script type="text/javascript" src="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>