jquery实现隔行变色、图片放大预览、无刷新批量删除
1.页面（html+css）
CSS：body{
text-align:center; margin:0 auto;
?}
table{
width:500px; border-collapse:collapse;text-align:center; margin:0 auto;
}
table tr th,td{
border:solid 1px #666; text-align:center;
}
table tr th{
background-color:#09F;}
table tr td img{
width:80px; height:100px;}
.clsImg{
position:absolute; border:1px solid #096;
display:none; width:240px; height:320px;}
HTML：
<body>
<table>
<tr>
<th>选项</th><th>编号</th><th>封面</th>
</tr>
<tr id="0">
<td><input id="checkbox1" type="checkbox" value="0"/></td>
<td>10001</td>
<td><img ?src="psu.jpg" /></td>
</tr>
<tr id="1">
<td><input id="checkbox2" type="checkbox" value="1"/></td>
<td>10002</td>
<td><img ?src="psu.jpg" /></td>
</tr>
<tr id="2">
<td><input id="checkbox3" type="checkbox" value="2"/></td>
<td>10003</td>
<td><img ?src="psu.jpg" /></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="删除" /></span>
</td></tr>
</table>
<img id="imgTip" src="psu (1).jpg" />
</body>
2.jquery代码
$(function(){
//隔行变色
$("table tr:nth-child(odd)").css("background-color","#9FF");?
//全选框单击事件
$("#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 len=$("table tr td input:checked:not('#chkAll')").length;
//如果有选中项
if(len!=0){
//遍历除了全选框外的行
$("table tr td input[type=checkbox]:not('#chkAll')").each(function(index) {
? ? ? ? ? ? //如果被选中了，根据每行的checkbox的值来删除该行，this.value就是遍历到改行的checkbox的值，同时也是改行tr的id的值，根据id进行删除行
? ? ? ? ? ?if(this.checked){
$("table tr[id="+this.value+"]").remove();
}
? ? ? ? ? ? });
}
})
//图片预览功能--->小图片移动事件
var x=5; var y=15;
$("table tr td img").mouseover(function(e){
//设置图片和显示图片：
//原理：给之前隐藏的图片设置css属性，将当前鼠标停留的图片赋予src的值，再设置位置与小图片的相对位置
$("#imgTip").attr("src",this.src).css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show(500);
})
//鼠标移除后
$("table tr td img").mouseout(function(){
$("#imgTip").hide();
})
})
</script>
3. 后续使用修改说明
? ? （一）如果页面的html有多个table，那就加上指定table的id，写法是：$("#table_id,table tr:nth-child(odd)")，这样就实现了指定哪一个table的操作
? ? （二）批量删除table的tr，同时又将数据库的记录删掉，就直接在$("table tr[id="+this.value+"]").remove();下面直接调用jquery的$.post或者$.get方法传给处理删除的文件即可
