快捷導(dǎo)航

jquery入門—數(shù)據(jù)刪除與隔行變色以及圖片預(yù)覽

更新時(shí)間：2013年01月07日 11:13:47 作者：

項(xiàng)目需求：表格中數(shù)據(jù)隔行變色、刪除數(shù)據(jù)、全選刪除、鼠標(biāo)移動(dòng)到圖片時(shí)顯示圖片預(yù)覽等等，感興趣的朋友可以參考下

1、功能需求：表格中數(shù)據(jù)隔行變色、刪除數(shù)據(jù)、全選刪除、鼠標(biāo)移動(dòng)到圖片時(shí)顯示圖片預(yù)覽
2、示例代碼如下：

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> 數(shù)據(jù)管理 </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"> 
</script> 
<style type="text/css"> 
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:left;padding-left:12px} 
table tr th{background-color:#ccc;height:32px} 
.clsImg{position:absolute;border:solid 1px #ccc;padding:3px;width:85px;height:120px;background-color:#eee;display:none} 
.btn{border:#666 1px solid;padding:2px;width:50px;filter:progid;DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9DB);} 
</style> 
<script type="text/javascript"> 
$(function(){ 
/**隔行變色**/ 
$("table tr:nth-child(odd)").css("background-color","#eee"); 
/**全選復(fù)選框單擊事件**/ 
$("#chkAll").click(function(){ 
if(this.checked){ 
$("table tr td input[type=checkbox]").attr("checked",true); 
}else{ 
$("table tr td input[type=checkbox]").attr("checked",false); 
} 
}); 
/**刪除按鈕單擊事件**/ 
$("#btnDel").click(function(){ 
var intL = $("table 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(); 
} 
}); 
} 
}); 
/**小圖片鼠標(biāo)移動(dòng)事件**/ 
var x = 5; var y = 15; 
$("table tr td img").mousemove(function(e){ 
$("#imgTip").attr("src",this.src).css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show(3000); 
}); 
/**小圖片鼠標(biāo)移出事件**/ 
$("table tr td img").mouseout(function(){ 
$("#imgTip").hide(); 
}); 
}); 
</script> 
</HEAD> 
<BODY> 
<table> 
<tr> 
<th>選項(xiàng)</th> 
<th>編號</th> 
<th>封面</th> 
<th>購書人</th> 
<th>性別</th> 
<th>購書價(jià)</th> 
</tr> 
<tr id="0"> 
<td><input id="Checkbox1" type="checkbox" value="0"/></td> 
<td>1001</td> 
<td><img src="Images/img03.jpg" alt=""></td> 
<td>劉明明</td> 
<td>女</td> 
<td>37.80元</td> 
</tr> 
<tr id="1"> 
<td><input id="Checkbox2" type="checkbox" value="1"/></td> 
<td>1002</td> 
<td><img src="Images/img04.jpg" alt=""></td> 
<td>李小明</td> 
<td>男</td> 
<td>35.60元</td> 
</tr> 
<tr id="2"> 
<td><input id="Checkbox3" type="checkbox" value="2"/></td> 
<td>1003</td> 
<td><img src="Images/img08.jpg" alt=""></td> 
<td>張小星</td> 
<td>女</td> 
<td>45.60元</td> 
</tr> 
</table> 
<table> 
<tr> 
<td style="text-align:left;height:28px"> 
<span> 
<input id="chkAll" type="checkbox"/>全選 
</span> 
<span> 
<input id="btnDel" type="button" value="刪除" class="btn"/> 
</span> 
</td> 
</tr> 
</table> 
<img id="imgTip" class="clsImg" src="Images/img03.gif"/> 
</BODY> 
</HTML> 