<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.big{
border-collapse: collapse;
border:1px solid black;
}
.big tr td{
border:1px solid black;
}
</style>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function Check(){
var all=document.getElementById("allCheck").checked;
var chs=document.getElementsByName("item");
if(all){
for(let i=0;i<chs.length;i++){
chs[i].checked=true;
}
}else{
for(let i=0;i<chs.length;i++){
chs[i].checked=false;
}
}
}
function CheckItem(){
var chs=document.getElementsByName("item");
var a=0;
for(var i=0;i<chs.length;i++){
if(chs[i].checked){
a++;
}
}
if(a==chs.length){
document.getElementById("allCheck").checked=true;
}else{
document.getElementById("allCheck").checked=flase;
}
if(a==0){
document.getElementById("allCheck").checked=flase;
}
}
$(document).ready(function(){
$("body").on("click",".delete",function(){
$(this).parent().parent().remove();
});
});
</script>
</head>
<body>
<table class="big">
<tr>
<td><input type="checkbox" name="" id="allCheck" οnclick="Check()">全选</td>
<td>商品信息</td>
<td>宜美惠价</td>
<td>数量</td>
<td>操作</td>
</tr>
<tr class="tr1">
<td><input type="checkbox" name="item" id="" οnclick="CheckItem()"></td>
<td><img src="images/sang.gif" alt=""><a href="#">天堂雨伞</a></td>
<td>￥32.9元</td>
<td><img src="images/subtraction.gif" alt=""><input type="text" value="1"><img src="images/add.gif" alt=""></td>
<td><a href="#" class="delete">删除</a></td>
</tr>
<tr class="tr1">
<td><input type="checkbox" name="item" id="" οnclick="CheckItem()"></td>
<td><img src="images/iphone.gif" alt=""><a href="#">苹果手机iphone5</a></td>
<td>￥3339元</td>
<td><img src="images/subtraction.gif" alt=""><input type="text" value="1"><img src="images/add.gif" alt=""></td>
<td><a href="#" class="delete">删除</a></td>
</tr>
<tr class="tr1">
<td><input type="checkbox" name="item" id="" οnclick="CheckItem()"></td>
<td><img src="images/computer.jpg" alt=""><a href="#">联想笔记本电脑</a></td>
<td>￥3189元</td>
<td><img src="images/subtraction.gif" alt=""><input type="text" name="" id="" value="1"><img src="images/add.gif" alt=""></td>
<td><a href="#" class="delete">删除</a></td>
</tr>
</table>
<a href="#" class="add">添加</a>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
