基于Jquery的表格隔行换色，移动换色，点击换色插件

效果图:

编写JQUERY插件如下：

;(function($) {
$.fn.extend({
“alterBgColor”:function(options){
//设置默认值
option=$.extend({
odd:”odd”,
even:”even”,
selected:”selected”
},options); //注意这个options 同上面的function(options)中的option是同一个对象
//隔行变色
$(“tbody>tr:enev”,this).addClass(option.even);
$(“tbody>tr:odd”,this).addClass(option.odd);
//单击行变色
$(‘tbody>tr’,this).click(function(){
var hasSelected = $(this).hasClass(option.selected);
$(this)[hasSelected?”removeClass”:”addClass”](option.selected)
.find(“:checkbox”).attr(‘checked’,!hasSelected);
});
$(“tbody>tr:has(:checked)”,this).addClass(option.selected);
return this; //返回this，使方法可链
}
});
})(jQuery);

二、应用JQUERY插件

$(function(){
//按默认类
$(“#table2”).alterBgColor()
.find(“th”).css(“font-size”,”18″);
//自定义类，给定值；
$(“#table1”).alterBgColor({
odd:”odd1″,
even:”even1″,
selected:”mselected”
}).find(“th”).css(“font-size”,”18″);
})

三、两个不同的表格结构：

<table width=”394″ height=”115″ border=”0″ cellpadding=”3″ cellspacing=”1″ id=”table2″>
<thead class=”caption”>
<tr id=”title”>
<th> </th>
<th height=”32″>姓名</th>
<th>姓别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name=”id” type=”checkbox” value=”1″ /></td>
<td>王锋</td>
<td>男</td>
<td>北京海淀区肖家河</td>
</tr>
<tr>
<td><input name=”id” type=”checkbox” value=”2″ /></td>
<td>王兴</td>
<td>女</td>
<td>河北石家庄</td>
</tr>
<tr>
<td><input name=”id” type=”checkbox” value=”3″ /></td>
<td>李明</td>
<td>男</td>
<td>北京昌平区回龙观</td>
</tr>
<tr>
<td><input name=”id” type=”checkbox” value=”4″ /></td>
<td>程子</td>
<td>男</td>
<td>北京西城区</td>