数据删除和图片预览在项目中的运用

<script>

$(function(){

$("table tr : nth-child(odd)").css("backgroud-color","#eee");//隔行变色

/**全选复选框单击事件**/

$("#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();

}

})

}

})

/**小图片鼠标移动事件**/

var x = 5; var y = 15;//初始化提示图片位置

$("table tr td img").mousemove(function(e){

$("imgTip").attr("src",this.src)//设置提示图片src属性

.css({"top":(e.pageY + y) + "px","left":(e.pageX + x) + "px"})//设置提示图片的位置

.show(3000);//显示图片

})

/**小图片鼠标移出事件**/

$("table tr td img").mouseout(function(){

$("#imgTip").hide();//隐藏图片

})

})

</script>

<table>

<tr>

<th>选项</th>

<th>编号</th>

<th>封面</th>

<th>购书人</th>

<th>性别</th>

<th>购书价</th>

</tr>

<tr id="0">

<td>

<input id="Checkbox1" type="checkbox" value="0" />

</td>

<td>1001</td>

<td><img src="Images/img01.jpg" alt="" /></td>

<td>黎明</td>

<td>男</td>

<td>35元</td>

</tr>

<tr id="1">

<td>

<input id="Checkbox2" type="checkbox" value="1" />

</td>

<td>1002</td>

<td><img src="Images/img02.jpg" alt="" /></td>

<td>小王</td>

<td>男</td>

<td>40元</td>

</tr>

<tr id="2">

<td>

<input id="Checkbox3" type="checkbox" value="2" />

</td>

<td>1003</td>

<td><img src="Images/img03.jpg" alt="" /></td>

<td>张黎</td>

<td>男</td>

<td>34元</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" />