<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js"></script>
<style type="text/css">
form table{width:100%; text-align: center}
form table th{ line-height: 50px; vertical-align: middle;}
form table td{color: #000;font-size: 12px; line-height: 50px; vertical-align: middle;}
form table thead td{color: #8d8d8d; }
form table td span{width:18px; height:18px; border-radius: 4px; border:1px solid #d5d5d5;background-color: #fff;display: inline-block;box-sizing: border-box;vertical-align: middle;position:relative;}
form table td span.sel{border:1px solid #2cb5ec;}
form table td span.sel i{background-color: #2cb5ec; width:12px;height:12px; background-color: #2cb5ec;border-radius: 4px;display: inline-block;vertical-align: top;margin-top: 2px;}
form table td span input[type="checkbox"]{width:20px;height:20px;position:absolute;opacity:1;top:-5px;left:-5px;}
form table tbody td:nth-child(2){position: relative;}
form table tbody td:nth-child(2) div{display:none; position: absolute;width:100px;height:100px; border:1px solid #e7e7e7;top:-30px; left:90px; box-shadow: 0 0 10px 0px rgba(209,211,210,0.5); background-color: #fff;}
form table tbody td:nth-child(2) div img{width: 100px;}
form table tbody td:nth-child(2):hover div{display: block;}
form .list_table table tr:hover td{background-color:#e9f4ff; }
form .list_table table thead tr:hover td{background-color:none; }
.search table tr td input[type="text"]{width:140px;}
</style>
<script type="text/javascript">
$(function () {
$("table tr>td:first-child span").click(function(){
$(this).toggleClass("sel");
});
//全选或全不选
$("table thead> tr>td:first-child span>input").click(function(){
if(this.checked){
$("table tbody>tr>td span>input:checkbox").prop("checked", true);
}else{
$("table tbody>tr>td span>input:checkbox").prop("checked", false);
}
});
//设置全选复选框
$("table tbody>tr>td span>input :checkbox").click(function(){
allchk();
});
function allchk(){
var chknum = $("table tbody>tr>td span>input :checkbox").size();//选项总个数
var chk = 0;
$("table tbody>tr>td span>input :checkbox").each(function () {
if($(this).prop("checked")==true){
chk++;
}
});
if(chknum==chk){//全选
$("table thead> tr>td:first-child span>input").prop("checked",true);
}else{//不全选
$("table thead>tr>td:first-child span>input").prop("checked",false);
}
};
</script>
</head>
<body>
<form>
<div>
<div>
<table cellspacing="0">
<thead>
<tr>
<td><span><i></i><input type="checkbox"></span></td>
<td>商品名称</td>
<td>店铺名称</td>
<td>商品名称</td>
<td>店铺名称</td>
<td>商品名称</td>
<td>店铺名称</td>
</tr>
</thead>
<tbody>
<tr>
<td><span><i></i><input type="checkbox"></span></td>
<td>商品名称</td>
<td>店铺名称</td>
<td>商品名称</td>
<td>店铺名称</td>
<td>商品名称</td>
<td>店铺名称</td>
</tr>
<tr>
<td><span><i></i><input type="checkbox"></span></td>
<td>商品名称</td>
<td>店铺名称</td>
<td>商品名称</td>
<td>店铺名称</td>
<td>商品名称</td>
<td>店铺名称</td>
</tr>
<tr>
<td><span><i></i><input type="checkbox"></span></td>
<td>商品名称</td>
<td>店铺名称</td>
<td>商品名称</td>
<td>店铺名称</td>
<td>商品名称</td>
<td>店铺名称</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</body>
</html>
qq__8222
相关分类