jquery入門—資料刪除與隔行變色以及圖片預覽_jquery

1、功能需求：表格中資料隔行變色、刪除資料、全選刪除、滑鼠移到圖片時顯示圖片預覽
2、範例程式碼如下：

複製程式碼 程式碼如下:

;

資料管理





腳本>

body{font-size:12px}
table{width:360px;border-collapse:collapse}
table tr th,td{border:solid 1px #666; text-align:center}
table tr td img{border:solid 1px #ccc;padding:3px;width:42px;height:60px;cursor:hand}
table tr td span{float:leftpad; -left:12px}
表tr th{背景顏色:#ccc;高度:32px}
.clsImg{位置:絕對;邊框:實心1px #ccc;填充:3px;寬度:85px;高度:120px ;背景顏色:#eee ;顯示:無}
.btn{邊框:#666 1px 實心;填滿:2px;寬度:50px;過濾器:progid;DXImageTransform.Microsoft.Gradient(GradientType=0,ColStartorStr=######## ffffff,EndColorStr=#ECE9DB) ;}
樣式>

$(function(){
/**隔行變色**/
$("table tr:nth-child(odd)").css("背景顏色","#eee" );
/**全選複選框點選事件**/
$("#chkAll" ).click(function(){
if(this.checked){
$("表tr td 輸入[type=checkbox]").attr("已選取",true);
} else{
$("table tr td input[type=checkbox]").attr("已選取",false);
}
})
/**刪除按鈕點擊事件**/
$("#btnDel").click(function(){
var intL = $("表tr td input:checked:not('#chkAll')").length;
if( intL !=0){
$("table tr td input[type=checkbox]:not('#chkAll') ").each(function(index){
if(this.checked){
$("table tr[id=" this.value "]").remove();
}
});
}
});/**小圖片滑鼠移動事件** /
var x = 5;
$("表tr td img") .mousemove(function(e){
$("#imgTip").attr("src",this.src) .css({"top":(e.pageY y) "px","left" :(e.pageX x) "px"}).show(3000)
});
/** 小圖片滑鼠移出事件**/
$("table tr td img").mouseout( function(){
$("#imgTip").hide();
});
腳本>


;

選項
第個編號第>個
封面第>>
第
性別第>
第/第>



1001

劉明明
女
37.80元



1002

李小明
男
35.60元



1003

張小星
女
45.60元

表>
;



全選






表>

身體>