购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function add(){
var name=document.getElementById("name").value;
var price=document.getElementById("price").value;
var shu=document.getElementById("shu").value;
var child="<tr>"+
"<td><input type='checkbox' class='check'></td>"
+"<td>"+name+"</td>"
+"<td>"+price+"</td>"
+"<td>"+shu+"</td>"
+"</tr>";
document.getElementById("car").lastElementChild.innerHTML+=child;//innerHTML内容 属性 元素内的//+=反复赋值
}
function select(){
var checks=document.getElementsByClassName("check");
for (var i=0; i<checks.length;i++)
{
checks[i].checked=true;
//checks[i].setAttribute("checked","checked");//全选
//在需要选择的位置起一个class名称
//还需再添加的class名称调用
}
document.getElementById("one").innerHTML="全不选";
}
function usel()
{
var checks=document.getElementsByClassName("check");
for (var i=0; i<checks.length;i++)
{
checks[i].checked=false;
}
document.getElementById("one").innerHTML="全选";
}
function del()
{
var checks=document.getElementsByClassName("check");
for (var i=0;i<checks.length;i++)
{
checks[i].parentNode.parentNode.remove();
}
}
</script>
</head>
<body>
<fieldset>
<legend>商品添加</legend>
商品:<input type="text" name="" id="name" value=""/>
单价:<input type="text" name="" id="price" value=""/>
数量：<input type="text" name="" id="shu" value=""/>
<button onclick="add()">添加</button>
</fieldset>
<table border="1" id="car">
<tr>
<td>
<button id="one" onclick="select()"onclick="use1()">全选</button>
</td>
<td>
<button style="width:95px;" onclick="del()">删除</button>
<!--<input type="button" name="" onclick="" value="全选"/>-->
</td>
</tr>
<tr>
<td></td>
<td>商品</td>
<td>价格</td>
<td>数量</td>
</tr>
<tr>
<td><input class="check"type="checkbox" name=""></td>
<td></td>
<td></td>
</tr>
</table>
请输入商品：<input type="text" name="" id="" value="">
</body>
</html>
