一.效果展示如下
jQuery组件之表格插件源码
//表格选中插件
//方式一
(function($){
var chosTabBgColor = function(options){
//设置默认值
var options = $.extend({
odd:"odd", //奇数
even:"even",//偶数
selected:"selected"
},options); $("tbody tr:odd", this).addClass(options.odd);
$("tbody tr:even", this).addClass(options.even);
//判定是否选中
var hasSelected = $("tbody tr").hasClass("selected");
$("tbody>tr", this).click(function(){
var $that = $(this);
//判断是否选中
var hasSelected = $that.hasClass(options.selected);
//如果选中，则移除selected类，否则添加selected类
$that[hasSelected ? "removeClass" : "addClass"](options.selected)
//查找内部的checkbox，并设置其属性
.find("[type=checkbox]").attr("checked",!hasSelected);
}); // 如果单选框默认情况下是选择的，则高色.
$("tbody>tr:has(:checked)", this).addClass(options.selected);
}
$.fn.chosTabBgColor = chosTabBgColor;
})(jQuery)
//方式二
/*(function($){
$.fn.extend({
"chosTabBgColor":function(options){
//设置默认值
var options = $.extend({
odd:"odd", //奇数
even:"even",//偶数
selected:"selected"
},options); $("tbody tr:odd", this).addClass(options.odd);
$("tbody tr:even", this).addClass(options.even);
//判定是否选中
var hasSelected = $("tbody tr").hasClass("selected");
$("tbody>tr", this).click(function(){
var $that = $(this);
//判断是否选中
var hasSelected = $that.hasClass(options.selected);
//如果选中，则移除selected类，否则添加selected类
$that[hasSelected ? "removeClass" : "addClass"](options.selected)
//查找内部的checkbox，并设置其属性
.find("[type=checkbox]").attr("checked",!hasSelected);
}); // 如果单选框默认情况下是选择的，则高色.
$("tbody>tr:has(:checked)", this).addClass(options.selected); return this;//返回链式调用
}
});
})(jQuery)*/
html源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格选中插件</title>
<style>
html {
font-family: "微软雅黑";
}
.table {
width: %;
border-collapse: collapse;
border: ;
}
.table tr th, tr td {
border: solid 1px #cecece;
padding: 8px 10px;
text-align: left;
}
.bg-00A5FF {
background-color: #088c78;
color: #fff;
}
.table tr {
cursor: pointer;
}
.even { background:#c7c7c7; color: #fff;} /* 偶数行样式*/
.odd { background:#FFFFFF; } /* 奇数行样式*/
.selected { background:#00a1d4; color:#E91E63;}
</style> <script type="text/javascript" src="js/lib/jquery-3.1.1.min.js" ></script>
<!-- 作者：zhangjaingfeng 时间：-- 描述：表格选择chosTab组件 -->
<script type="text/javascript" src="js/chosTab.js" ></script>
<script type="text/javascript">
$(function(){
$(".table").chosTabBgColor({});
})
</script>
</head>
<body>
<table class="table" cellpadding="" cellspacing="" border="">
<colgroup>
<col width="10%"/>
<col width="30%"/>
<col width="30%"/>
<col width="30%"/>
</colgroup>
<thead class="bg-00A5FF">
<tr>
<th>请选择</th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr class="">
<td><input type="checkbox" name=""/></td>
<td>Ulin</td>
<td>男</td>
<td>成都市高新区新怡华园</td>
</tr>
<tr>
<td><input type="checkbox" name=""/></td>
<td>Ylin</td>
<td>男</td>
<td>成都市高新区新怡华园</td>
</tr>
<tr>
<td><input type="checkbox" name=""/></td>
<td>Flin</td>
<td>男</td>
<td>成都市高新区新怡华园</td>
</tr>
<tr>
<td><input type="checkbox" name=""/></td>
<td>Alin</td>
<td>男</td>
<td>成都市高新区新怡华园</td>
</tr>
</tbody>
</table>
</body>
</html>