做了一个购物车的，如下图，我想实现点击加入购物车之后，下面的购物车table不会出现重名，如果相同物品我希望在数量上加1,该怎么实现？？我写的代码 在下面 请大神帮我看看！<!DOCTYPE html><html> <head> <title>购物车</title> <meta charset="utf-8" /> <style type="text/css"> h1 { text-align:center; } table { margin:0 auto; width:60%; border:2px solid #aaa; border-collapse:collapse; } table th, table td { border:2px solid #aaa; padding:5px; } th { background-color:#eee; } </style> <script type="text/javascript"> function add_shoppingcart(btn){ var tr=btn.parentNode.parentNode; var td0=tr.children[0]; var name=td0.innerHTML; var td1=tr.children[1]; var price=td1.innerHTML; var ntr=document.createElement("tr"); ntr.innerHTML= '<td>'+name+'</td>'+ '<td>'+price+'</td>'+ '<td align="center">'+ '<input type="button" value="-" onclick="jian(this);"/>'+ '<input type="text" size="3" readonly value="1"/>'+ '<input type="button" value="+" onclick="jia(this);"/>'+ '</td>'+ '<td>'+price+'</td>'+ '<td align="center"><input type="button" value="x" onclick="del(this);"/></td>'; var tbody=document.getElementById("goods"); tbody.appendChild(ntr); if(ntr==name){ amount++; } sum(); } function del(btn){ var tr=btn.parentNode.parentNode; tr.parentNode.removeChild(tr); } function jia(btn){ var td=btn.parentNode; var text=td.children[1]; var amount=parseInt(text.value); text.value=++amount; var tr=td.parentNode; var td1=tr.children[1]; var price=parseFloat(td1.innerHTML); var td3=tr.children[3]; var mny=price*amount; td3.innerHTML=mny; sum(); } function jian(btn){ var td=btn.parentNode; var text=td.children[1]; var amount=parseInt(text.value); if(amount==1){ return; } text.value=--amount; var tr=td.parentNode; var td1=tr.children[1]; var price=parseFloat(td1.innerHTML); var td3=tr.children[3]; var mny=price*amount; td3.innerHTML=mny; sum(); } function sum(){ var tbody=document.getElementById("goods"); var trs=tbody.children; var sum=0; for(var i=0;i<trs.length;i++){ var td3=trs[i].children[3]; var mny=parseFloat(td3.innerHTML); sum+=mny; } var td=document.getElementById("total"); } </script> </head> <body> <h1>真划算</h1> <table> <tr> <th>商品</th> <th>单价(元)</th> <th>颜色</th> <th>库存</th> <th>好评率</th> <th>操作</th> </tr> <tr> <td>罗技M185鼠标</td> <td>80</td> <td>黑色</td> <td>893</td> <td>98%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>微软X470键盘</td> <td>150</td> <td>黑色</td> <td>9028</td> <td>96%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>洛克iphone6手机壳</td> <td>60</td> <td>透明</td> <td>672</td> <td>99%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>蓝牙耳机</td> <td>100</td> <td>蓝色</td> <td>8937</td> <td>95%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> <tr> <td>金士顿U盘</td> <td>70</td> <td>红色</td> <td>482</td> <td>100%</td> <td align="center"> <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/> </td> </tr> </table> <h1>购物车</h1> <table> <thead> <tr> <th>商品</th> <th>单价(元)</th> <th>数量</th> <th>金额(元)</th> <th>删除</th> </tr> </thead> <tbody id="goods"> <!-- <tr> <td>罗技M185鼠标</td> <td>80</td> <td align="center"> <input type="button" value="-"/> <input type="text" size="3" readonly value="1"/> <input type="button" value="+"/> </td> <td>80</td> <td align="center"><input type="button" value="x"/></td> </tr> --> </tbody> <tfoot> <tr> <td colspan="3" align="right">总计</td> <td id="total"></td> <td></td> </tr> </tfoot> </table> </body></html>
添加回答
举报
0/150
提交
取消