<!DOCTYPE html>
<html>
<head>
<title>列表页面</title>
<meta charset="utf-8">
<style type="text/css">
#content{
border-style: ridge;
border-color: #C0C0C0;
border-collapse: collapse;/*如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性*/
}
td{
width: 60px;
height: 80px;
}
td{border:solid #C0C0C0;
border-width:0px 1px 1px 0px;
text-align: center;
}
img{
width: 30px;
height: 40px;
}
img:hover{
width: 60px;
height: 80px;
}
</style>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$().ready(function() {
$("input[name='b']").click(function(){//判断当前点击的复选框处于什么状态$(this).is(":checked") 返回的是布尔类型
if($(this).is(":checked")){
$("input[name='a']").prop("checked",true);
}else{
$("input[name='a']").prop("checked",false);
}
});
$("input[type='button']").click(function() {
$("input[name='a']:checked").each(function() { // 遍历选中的checkbox
n = $(this).parents("tr").index(); // 获取checkbox所在行的顺序
$("#content").find("tr:eq("+n+")").remove();
});
});
// $("#content img").hover(function(){
// var imgWid = 0 ;
// var imgHei = 0 ; //变量初始化
// var big = 1.2;//放大倍数
// $(this).stop(true,true);
// imgWid = $(this).width();
// imgHei = $(this).height();
// imgWid2 = imgWid * big;
// imgHei2 = imgHei * big;
// $(this).css({"z-index":2});
// $(this).animate({"width":imgWid2,"height":imgHei2,"margin-left":-imgWid2/2,"margin-top":-imgHei2/2});
// });
})
</script>
</head>
<body>
<div>
<table id="content" border="1" cellpadding="0" cellspacing="0">
<tr style="background-color: #C0C0C0; height: 40px;">
<th>选项</th>
<th>编号</th>
<th>封面</th>
<th>购书人</th>
<th>性别</th>
<th>购书价</th>
</tr>
<tr>
<td><input type="checkbox" name="a"></td>
<td>1001</td>
<td><img src="images/0.jpg"></td>
<td>李小明</td>
<td>男</td>
<td>35.60</td>
</tr>
<tr>
<td><input type="checkbox" name="a"></td>
<td>1002</td>
<td><img src="images/1.jpg"></td>
<td>刘明明</td>
<td>女</td>
<td>37.80</td>
</tr>
<tr>
<td><input type="checkbox" name="a"></td>
<td>1003</td>
<td><img src="images/2.jpg"></td>
<td>张小星</td>
<td>女</td>
<td>45.60</td>
</tr>
<tr>
<td colspan="6" style="text-align: left;height: 40px;"><input type="checkbox" name="b">全选 <input type="button" value="删除" name=""></td>
</tr>
</table>
</div>
</body>
</html>
