基于Jquery的表格隔行換色，移動(dòng)換色，點(diǎn)擊換色插件

更新時(shí)間：2010年12月22日 15:53:31 作者：

希望能和大家一起交流學(xué)習(xí)。先放上去一個(gè)上周學(xué)習(xí)的一個(gè)jquery插件，基于Jquery的表格隔行換色，移動(dòng)換色，點(diǎn)擊換色插件。

效果圖:

編寫JQUERY插件如下：

復(fù)制代碼代碼如下:

 
;(function($) { 
$.fn.extend({ 
"alterBgColor":function(options){ 
//設(shè)置默認(rèn)值 
option=$.extend({ 
odd:"odd", 
even:"even", 
selected:"selected" 
},options); //注意這個(gè)options 同上面的function(options)中的option是同一個(gè)對象 
//隔行變色 
$("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); 

二、應(yīng)用JQUERY插件

復(fù)制代碼代碼如下:

 
$(function(){ 
//按默認(rèn)類 
$("#table2").alterBgColor() 
.find("th").css("font-size","18"); 
//自定義類，給定值； 
$("#table1").alterBgColor({ 
odd:"odd1", 
even:"even1", 
selected:"mselected" 
}).find("th").css("font-size","18"); 
}) 

三、兩個(gè)不同的表格結(jié)構(gòu)：

復(fù)制代碼代碼如下:

 
<table width="394" height="115" border="0" cellpadding="3" cellspacing="1" id="table2"> 
<thead class="caption"> 
<tr id="title"> 
<th>&nbsp;</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>北京海淀區(qū)肖家河</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>北京昌平區(qū)回龍觀</td> 
</tr> 
<tr> 
<td><input name="id" type="checkbox" value="4" /></td> 
<td>程子</td> 
<td>男</td> 
<td>北京西城區(qū)</td> 
</tr> 
<tr> 
<td><input name="id" type="checkbox" value="5" /></td> 
<td>趙垛穩(wěn)</td> 
<td>男</td> 
<td>北京海淀區(qū)上地</td> 
</tr> 
<tr> 
<td><input name="id" type="checkbox" value="6" /></td> 
<td>陳曦</td> 
<td>女</td> 
<td>北京海淀區(qū)萬泉莊</td> 
</tr> 
</tbody> 
</table> 

<table width="394" height="115" border="0" cellpadding="3" cellspacing="1" id="table1"> 
<thead class="caption"> 
<tr id="title"> 
<th>&nbsp;</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>北京海淀區(qū)肖家河</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>北京昌平區(qū)回龍觀</td> 
</tr> 
<tr> 
<td><input name="id" type="checkbox" value="4" /></td> 
<td>程子</td> 
<td>男</td> 
<td>北京西城區(qū)</td> 
</tr> 
<tr> 
<td><input name="id" type="checkbox" value="5" /></td> 
<td>趙垛穩(wěn)</td> 
<td>男</td> 
<td>北京海淀區(qū)上地</td> 
</tr> 
<tr> 
<td><input name="id" type="checkbox" value="6" /></td> 
<td>陳曦</td> 
<td>女</td> 
<td>北京海淀區(qū)萬泉莊</td> 
</tr> 
</tbody> 
</table> 

四、樣式如下：

復(fù)制代碼代碼如下:

 
<style> 
.even{ background:#E3C575;} 
.odd{ background:#D5D500;} 
.selected{ background:#FF6262; color:#FFFFFF;} 
table{ border:#666666 1px solid; font-size:12px;} 
table .caption{ background:#B0B0FF; color:#FFFFFF; test-align:left;} 
.even1{ background:#C6FBB9;} 
.odd1{ background:#FFB9DC;} 
.mselected{ background:#F5CEA7; color:#FFFFFF;} 
</style> 

就此結(jié)束,希望大家都給 me--評(píng)論評(píng)論，謝謝!
如果不明白請與我（王鋒 QQ:155259396）聯(lián)系.

復(fù)制代碼代碼如下:

 
(function($){ 
$.fn.extend({ 
"SetTableBgColor":function(options){ 
//設(shè)置默認(rèn)樣式值 
option=$.extend({ 
odd:"odd",//奇數(shù)行 
even:"even",//偶數(shù)航 
selected:"selected",//選中行 
over:"over"http://鼠標(biāo)移動(dòng)上去時(shí) 
},options);//此處options與function里的參數(shù)為同一個(gè)對象 
//隔行換色 
$("tbody>tr:even",this).addClass(option.even); 
$("tbody>tr:odd",this).addClass(option.odd); 
//單擊行變色 
$("tbody>tr",this).click(function(){ 
$("tbody>tr").removeClass(option.selected); 
//var hasSelected=$(this).hasClass(option.selected);//返回true或false 查詢是否已經(jīng)包含點(diǎn)擊狀態(tài)下的樣式 
$(this).addClass(option.selected);//給選中行添加樣式 [hasSelected?"removeClass":"addClass"]根據(jù)是否包含移除和添加樣式 
}); 
//鼠標(biāo)移動(dòng)上去變色 
$("tbody>tr",this).mouseover(function(){ 
$(this).addClass(option.over); 
}); 
//鼠標(biāo)移出時(shí)變回原來的樣式 
$("tbody>tr",this).mouseout(function(){ 
$(this).removeClass(option.over); 
}); 
return this;//返回this，使方法可鏈 注意 這里必須返回 否則無法直接的調(diào)用方法 
} 
}); 
})(jQuery);//這個(gè)地方（jquery）必須加上，不然會(huì)報(bào)錯(cuò) 
//調(diào)用方法 
// $(".TableList").SetTableBgColor({ 
// odd:"", 
// even:"alt", 
// selected:"selected", 
// over:"over" 
// }); 