<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script>
window.onload=function(){
getSum();
function getSum(){
var tbody=document.getElementsByTagName("tbody")[0];
var sum=0;
for(var i=0;i<tbody.children.length;i++){
var tr=tbody.children[i];//tr.nodeName带小括号的是属性
if(tr.nodeName=="TR"){
var td = tr.children;
var price = parseInt(td[2].innerText);
var count = parseInt(td[3].children[0].value);
sum+=price*count;
td[3].children[0].onblur=function(){
//onchange是发生改变的时候调用
//onblur是失去焦点的时候调用
getSum();
}
}
}
var tfoot = document.getElementsByTagName("tfoot")[0];//有s的是数组
//取出tr-->取出td-->将数据放进去
tfoot.children[0].children[1].innerHTML=sum;
}
document.getElementById("ckAll").onclick=function(){//单击全选则都选中
var cks=document.getElementsByName("ck");
//cks 点击后是true,未点击是false
for(var i=0;i<cks.length;i++){
cks[i].checked=this.checked;//如果ckAll单击了,则都被单击
}
}
var cks=document.getElementsByName("ck");
for(var i=0;i<cks.length;i++){
cks[i].onclick=function(){
for(var i=0;i<cks.length;i++){
if(!cks[i].checked){
document.getElementById("ckAll").checked=false;
return;
}
document.getElementById("ckAll").checked=true;
}
}
}
}
</script>
</head>
<body>
<table border="1" cellspacing="0"><!--cellspacing 单元格间距-->
<thead>
<tr><th>全选<input type="checkbox" id="ckAll"/></th><th>商品</th><th>单价</th><th>数量</th><th></th></tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="ck"/></td>
<td><img src="haizeiwang/1.png"/></td>
<td>3</td>
<td><input type="number" max="10" min="0" step="1" value="2"/></td><!--step 合法数字间隔 -->
</tr>
<tr>
<td><input type="checkbox" name="ck"/></td>
<td><img src="haizeiwang/1.png"/></td>
<td>3</td>
<td><input type="number" max="10" min="0" step="1" value="2"/></td><!--step 合法数字间隔 -->
</tr>
<tr>
<td><input type="checkbox" name="ck"/></td>
<td><img src="haizeiwang/1.png"/></td>
<td>3</td>
<td><input type="number" max="10" min="0" step="1" value="2"/></td><!--step 合法数字间隔 -->
</tr>
</tbody>
<tfoot>
<tr><td colspan="3" align="right">总价:</td><td></td></tr>
</tfoot>
</table>
</body>
</html>
网友评论