![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function jian(a){ var tdob=a.parentNode; var childs=tdob.childNodes; for(var i=0;i<childs.length;i++){ var child=childs[i]; if(child.nodeName=="INPUT" && child.type=="text"){ var num=parseInt(child.value); if( num>0){ child.value=--num; } } } jisuan(); } function jia(btobj){ var tdob=btobj.parentNode; var childs=tdob.childNodes; for(var i=0;i<childs.length;i++){ var child=childs[i]; if(child.nodeName=="INPUT" && child.type=="text"){ var num=parseInt(child.value); child.value=++num; } } jisuan(); } function jisuan(){ var zhongji=0; var mytable=document.getElementById("shoppingCart"); var trs=mytable.getElementsByTagName("tr"); var trsLength=trs.length; for(var i=1;i<trsLength-1;i++){ var xiaoji=0; var currentTds=trs[i].getElementsByTagName("td"); var price=currentTds[1].innerHTML; var numTds=currentTds[2]; var inputs=numTds.getElementsByTagName("input"); var num=inputs[1].value; xiaoji=parseFloat(num)*parseFloat(price); currentTds[4].innerHTML=xiaoji; zhongji+=xiaoji; } mytable.lastElementChild.lastElementChild.lastElementChild.innerHTML=zhongji; } function addrow(){ var goodsname=document.getElementById("shopname").value; var goodsprice=document.getElementById("price").value; var mytable=document.getElementById("shoppingCart"); var newrow=mytable.insertRow(mytable.rows.length-1); var cell0=newrow.insertCell(0); cell0.innerHTML=goodsname; var cell1=newrow.insertCell(1); cell1.innerHTML=goodsprice; var cell2=newrow.insertCell(2); cell2.innerHTML="<input type='button' value='-' onclick='jian(this)'/> <input type='text' value='1' onblur='jisuan();' disabled='disabled'/> <input type='button' value='+' onclick='jia(this);'/>"; var cell3=newrow.insertCell(3); cell3.innerHTML="<td><input type='button' value='删除' onclick='removerow(this)'/></td>"; var cell4=newrow.insertCell(4); cell4.innerHTML=goodsprice; jisuan(); } function removerow(a){ var mytable=document.getElementById("shoppingCart"); a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode); jisuan(); }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="lianxi2.js" ></script> </head> <body> <h2> 购物车 </h2> <label>商品名称:<input type="text" id="shopname"/></label> <label>商品价格:<input type="text" id="price"/></label> <input type="button" value="增加" onclick="addrow();" />; <table id="shoppingCart" border="1"> <tr> <th> 商品名称 </th> <th> 价格 </th> <th> 数量 </th> <th> 操作 </th> <th> 小计 </th> </tr> <tr> <td>book1</td> <td>10.00</td> <td><input type="button" value="-" onclick="jian(this)"/> <input type="text" value="1" onblur="jisuan();"/> <input type="button" value="+" onclick="jia(this)"/> </td> <td><input type="button" value="删除" onclick="removerow(this)"/></td> <td>10.00</td> </tr> <tr> <td>book2</td> <td>5.00</td> <td><input type="button" value="-" onclick="jian(this)"/> <input type="text" value="1" onblur="jisuan();"/> <input type="button" value="+" onclick="jia(this);"/> </td> <td><input type="button" value="删除" onclick="removerow(this)"/></td> <td>5.00</td> </tr> <tr> <td>book3</td> <td>15.00</td> <td><input type="button" value="-" onclick="jian(this)"/> <input type="text" value="1" onblur="jisuan();" disabled="disabled"/> <input type="button" value="+" onclick="jia(this);"/> </td> <td><input type="button" value="删除" onclick="removerow(this)"/></td> <td>15.00</td> </tr> <tfoot> <td colspan="4" align="right">总计</td> <td>30.0</td> </tfoot> </table> </body> </html>