导读:经常在淘宝上选择商品时移到商品上会出现商品大图预览的效果，好吧今天哥们一起来看下这个使用jQuery如何实现。
案例需求：
1、页面上添加表格，用于显示多项信息。
2、如果选中表格中的复选框，点击“删除”则会删除选中项，如果选中“全选”再点击删除则会将表格中的数据全部删除。
3、将鼠标移到表格中的小图片中会显示大图，移开则隐藏大图。
全部代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--功能实现：1、页面表格隔行变色2、如果选中表格中某行的复选框并单击下面的删除按钮
那么会将其删除，如果选中”全选“复选框后，再次单击删除将会把全部数据删除3、如果将鼠标移到
表格中某行的小图片上将会在图片的右侧显示与之相对应的大图片。用以实现预览效果-->
<style type="text/css">
table{font-size:20px;}
table tr td{border:solid 1px #666;margin:0 auto;}
.clsImg{display:none;200px;height:200px;position:absolute;}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 实现隔行变色
$("table tr th").css("background", "red");
//全选复选框单击事件
$("#checkAll").click(function () {
if (this.checked) { //如果自己被选中则将所有的input选中
$("table tr td input[type='checkbox']").attr("checked", true); //将选中的checkbox的checked设为true
}
else {
$("table tr td input[type='checkbox']").attr("checked", false); //若未选中则将所有的checkbox设为false
}
});
//删除按钮单击事件
$("#btnDel").click(function () {
// var inputLength = $("table tr td:checked:not('#checkAll')").length; //获取除去全选复选框外所有选中项
// if (inputLength!=0) { //如果有选中项
alert("删除开始");
$("table tr td input[type=checkbox]:not('#checkAll')").each(function (index) { //遍历除全选复选框外的所有行
if (this.checked) { //如果有选中则删除
$("table tr[id=" + index + "]").remove(); //input中的value与tr中的id进行匹配来锁定选中项
alert("删除成功");
}
});
// }
});
//鼠标移上去时事件
$("table tr td img").mouseover(function (e) {
$("#imgTip").attr("src", this.src);
$("#imgTip").css("display", "block");
$("#imgTip").css("left", e.pageX).css("top", e.pageY);
});
//鼠标移出去时事件
$("table tr td img").mouseout(function () {
$("#imgTip").hide(); //移出去时隐藏图片
})
})
</script>
</head>
<body>
<table >
<tr><th>选项</th><th>编号</th><th>职员</th><th>姓名</th><th>性别</th><th>工资</th></tr>
<tr id="0">
<td><input type="checkbox" id="checkbox1" value="0"/></td>
<td>1001</td>
<td><img src="image/1.jpg" width="80px" height="30px" /></td>
<td>小张</td>
<td>女</td>
<td>4000</td>
</tr>
<tr id="1">
<td><input type="checkbox" id="checkbox2" value="1"/></td>
<td>1002</td>
<td><img src="image/2.jpg" width="80px" height="30px" /></td>
<td>小王</td>
<td>女</td>
<td>5000</td>
</tr>
<tr id="2">
<td><input type="checkbox" id="checkbox3" value="2"/></td>
<td>1003</td>
<td><img src="image/3.jpg" width="80px" height="30px" /></td>
<td>小周</td>
<td>女</td>
<td>600</td>
</tr>
</table>
<table>
<tr>
<td style="float:left;height:20px;">
<span ><input type="checkbox" id="checkAll" /></span>
<span ><input type="button" value="删除" id="btnDel"/></span>
</td>
</tr>
</table>
<img src="image/1.jpg" class="clsImg" id="imgTip"/>
</body>
</html>
刚学的jQuery希望大牛不要见怪，有错误及考虑不周多多拍砖。