设置表格隔行显示和选中行样式的插件

jquery.altertrstyle.js API:


alterTrStyle(options)

设置表格隔行显示和选中行样式效果，并且增加checkbox和radio选中效果。

返回值:jQuery
参数:
options(Map)：(可选)设置隔行显示和选中效果的css类集，格式为 {odd:"css类名", even:"css类名", selected:"css类名"}， Map建名必须为odd、even、selected，如果此参数未给定则css样式表中的css类名必须为odd、even、selected才能达到效果。

---

源码：

Js代码
;(function($){
$.fn.extend({
"alterTrStyle":function(options){
//设置默认值
options=$.extend({
odd:"odd",
even:"even",
selected:"selected"
},options);

var oddTr;
var evenTr;
var Tr;
var initSelectedTr;

if($("tbody").length>0){
oddTr = $("tbody>tr:odd",this);
evenTr = $("tbody>tr:even",this);
Tr = $("tbody>tr",this);
initSelectedTr = $("tbody>tr:has(:checked)",this);
}else{
oddTr = $("tr:odd",this);
evenTr = $("tr:even",this);
Tr = $("tr",this);
initSelectedTr = $("tr:has(:checked)",this);
}
//设置隔行变色
oddTr.addClass(options.odd);
evenTr.addClass(options.even);
//选中变色
Tr.click(function(){
//判断当前是否被选中
var hasSelected = $(this).hasClass(options.selected);
if($(this).find(':checkbox').length>0){
//如果选中，则移除selected类，否则就加上selected类
$(this)[hasSelected?"removeClass":"addClass"](options.selected)
.find(':checkbox').attr('checked',!hasSelected);
return;
}
if($(this).find(':radio').length>0){
$(this).addClass(options.selected)
.find(':radio').attr('checked',true).end()
.siblings(':has(:radio)').removeClass(options.selected)
.find(':radio').attr('checked',false);
return;
}
$(this)[hasSelected?"removeClass":"addClass"](options.selected);
});
//如果单选框默认是选中的，则高亮
initSelectedTr.addClass(options.selected);
return this;
}
});
})(jQuery);