<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>
qq_奋斗中的钢子_0
qq_奋斗中的钢子_0
相关分类