DIV CSS 佈局教程網

效果圖:

編寫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>
</tr>
<tr>
<td><input name="id" type="checkbox" value="5" /></td>
<td>趙垛穩</td>
<td>男</td>
<td>北京海澱區上地</td>
</tr>
<tr>
<td><input name="id" type="checkbox" value="6" /></td>
<td>陳曦</td>
<td>女</td>
<td>北京海澱區萬泉莊</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>北京海澱區肖家河</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>
</tr>
<tr>
<td><input name="id" type="checkbox" value="5" /></td>
<td>趙垛穩</td>
<td>男</td>
<td>北京海澱區上地</td>
</tr>
<tr>
<td><input name="id" type="checkbox" value="6" /></td>
<td>陳曦</td>
<td>女</td>
<td>北京海澱區萬泉莊</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"//鼠標移動上去時
},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 查詢是否已經包含點擊狀態下的樣式
$(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