<style type="text/css">
td{
text-align:center;
font-family:行书;
font-weight:bold;
color:#666;
}
ul{
list-style:none;
color:#946D86;
height:30px;
width:500px;
line-height:30px;
cursor:pointer;
}
a{
text-decoration: none;
color: #DAA376;
-moz-border-end-color: #FFF;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0px" width="600px" height="150px" id="tb">
<tr height="20px">
<td width="20%">商品名</td>
<td>单价</td>
<td>数量</td>
<td>总价</td>
</tr>
<tr>
<td>iphone6</td>
<td>6300</td>
<td><a href="javascript:void(0)"><</a><span>1</span><a href="javascript:void(0)">></a></td>
<td>6300</td>
</tr>
<tr>
<td>小米</td>
<td>1999</td>
<td><a href="javascript:void(0)"><</a><span>1</span><a href="javascript:void(0)">></a></td>
<td>1999</td>
</tr>
<tr>
<td>华为</td>
<td>2500</td>
<td><a href="javascript:void(0)"><</a><span>1</span><a href="javascript:void(0)">></a></td>
<td>2500</td>
</tr>
<tr>
<td colspan="3" style="text-align:right">总计</td>
<td>0</td>
</tr>
</table>
<ul>
<li onclick="add(this)" price="2500">索尼</li>
<li onclick="add(this)" price="2800">htc</li>
<li onclick="add(this)" price="1999">锤子</li>
<li onclick="add(this)" price="4500">三星</li>
<li onclick="add(this)" price="2600">乐视</li>
</ul>
<script type="text/javascript">
function add(e){
var bg=document.getElementById("tb");
var trsum=bg.rows;
for(var i=1;i<trsum.length-1;i++){
if(trsum[i].cells[0].innerHTML==e.innerHTML){
var childs=trsum[i].cells[2].childNodes;
childs[1].innerHTML=parseInt(childs[1].innerHTML)+1;
tot();
return;
}
}
var tr=bg.insertRow(trsum.length-1);
var name=tr.insertCell(0);
var price=tr.insertCell(1);
var num=tr.insertCell(2);
var total=tr.insertCell(3);
name.innerHTML=e.innerHTML;
price.innerHTML=e.getAttribute("price");
num.innerHTML="<a href='javascript:void(0)'><</a><span>1</span><a href='javascript:void(0)'>></a>"
total.innerHTML=e.getAttribute("price")*1;
tot();
}
function tot(){
var total=0;
var bg=document.getElementById("tb");
var trsum=bg.rows;
for(var i=1;i<trsum.length-1;i++){
var price=trsum[i].cells[1].innerHTML;
var num=trsum[i].cells[2].childNodes[1].innerHTML;
var trtotal=price*num;
total=total+trtotal;
trsum[i].cells[3].innerHTML=trtotal;
}
trsum[trsum.length-1].cells[1].innerHTML=total;
}
</script>
</body>
</html>
3 回答
已采纳
qq_冲哥_0
TA贡献40条经验 获得超30个赞
<tr>
<td>iphone6</td>
<td>6300</td>
<td><a href="javascript:void(0)"><</a><span>1</span><a href="javascript:void(0)">></a></td>
<td>6300</td>
上面是 i =1 的时候的行数据。
trsum[i].cells[1].innerHTML 第一行的第二列的内容 6300 是价格，所以取名price
trsum[i].cells[2].childNodes[1].innerHTML; 第一行的第三列的第二个字元素的内容， 就是span 的内容 1， 手机的数量，取名 num
trtotal=price*num 价格乘以数量，是总价，但是是一行的总价，所以取名 tr total.
trsum[i].cells[3].innerHTML=trtotal; 第一行第四列的内容 被算出来的总价代替。
循环之后，所有手机型号的总价都加在一起，赋值给total
trsum[trsum.length-1].cells[1].innerHTML=total; 最后一行第二列显示总价
qq_奋斗中的钢子_0
TA贡献4条经验 获得超0个赞
function tot(){
var total=0;
var bg=document.getElementById("tb");
var trsum=bg.rows;
for(var i=1;i<trsum.length-1;i++){
var price=trsum[i].cells[1].innerHTML;
var num=trsum[i].cells[2].childNodes[1].innerHTML;
var trtotal=price*num;
total=total+trtotal;
trsum[i].cells[3].innerHTML=trtotal;
}
trsum[trsum.length-1].cells[1].innerHTML=total;
这段是什么意思呢
添加回答
举报
0/150
提交
取消