基于Jquery的表格隔行換色,移動換色,點擊換色插件
更新時間:2010年12月22日 15:53:31 作者:
希望能和大家一起交流學習。先放上去一個上周學習的一個jquery插件,基于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>北京海淀區(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> </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>
四、樣式如下:
<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>
就此結束,希望大家都給 me--評論評論,謝謝!
如果不明白請與我(王鋒 QQ:155259396)聯系.
(function($){
$.fn.extend({
"SetTableBgColor":function(options){
//設置默認樣式值
option=$.extend({
odd:"odd",//奇數行
even:"even",//偶數航
selected:"selected",//選中行
over:"over"http://鼠標移動上去時
},options);//此處options與function里的參數為同一個對象
//隔行換色
$("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 查詢是否已經包含點擊狀態(tài)下的樣式
$(this).addClass(option.selected);//給選中行添加樣式 [hasSelected?"removeClass":"addClass"]根據是否包含移除和添加樣式
});
//鼠標移動上去變色
$("tbody>tr",this).mouseover(function(){
$(this).addClass(option.over);
});
//鼠標移出時變回原來的樣式
$("tbody>tr",this).mouseout(function(){
$(this).removeClass(option.over);
});
return this;//返回this,使方法可鏈 注意 這里必須返回 否則無法直接的調用方法
}
});
})(jQuery);//這個地方(jquery)必須加上,不然會報錯
//調用方法
// $(".TableList").SetTableBgColor({
// odd:"",
// even:"alt",
// selected:"selected",
// over:"over"
// });
/201012/yuanma/SetTableBgColor.rar

編寫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>北京海淀區(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> </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>
四、樣式如下:
復制代碼 代碼如下:
<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>
就此結束,希望大家都給 me--評論評論,謝謝!
如果不明白請與我(王鋒 QQ:155259396)聯系.
復制代碼 代碼如下:
(function($){
$.fn.extend({
"SetTableBgColor":function(options){
//設置默認樣式值
option=$.extend({
odd:"odd",//奇數行
even:"even",//偶數航
selected:"selected",//選中行
over:"over"http://鼠標移動上去時
},options);//此處options與function里的參數為同一個對象
//隔行換色
$("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 查詢是否已經包含點擊狀態(tài)下的樣式
$(this).addClass(option.selected);//給選中行添加樣式 [hasSelected?"removeClass":"addClass"]根據是否包含移除和添加樣式
});
//鼠標移動上去變色
$("tbody>tr",this).mouseover(function(){
$(this).addClass(option.over);
});
//鼠標移出時變回原來的樣式
$("tbody>tr",this).mouseout(function(){
$(this).removeClass(option.over);
});
return this;//返回this,使方法可鏈 注意 這里必須返回 否則無法直接的調用方法
}
});
})(jQuery);//這個地方(jquery)必須加上,不然會報錯
//調用方法
// $(".TableList").SetTableBgColor({
// odd:"",
// even:"alt",
// selected:"selected",
// over:"over"
// });
/201012/yuanma/SetTableBgColor.rar
相關文章
js原生態(tài)函數中使用jQuery中的 $(this)無效的解決方法
今天遇到一個聽郁悶的問題,正如title所說 js中原生態(tài)函數在jQuery 中使用 $(this) 被解析成undefined2011-05-05火狐4、谷歌12不支持Jquery Validator的解決方法分享
在火狐4、谷歌12瀏覽器中,使用jquery.tools.min 1.2.5版的Jquery Validator,不出現驗證提示框。在ie7、8、9下就好用。2011-06-06