(编辑:jimmy 日期: 2024/12/23 浏览:2)
本文实例为大家分享了jQuery实现购物车的具体代码,供大家参考,具体内容如下
HTML代码
<body> <div id="goodsStore"> <table> <caption>储 物 仓</caption> <thead> <tr> <td>商品编号</td> <td>商品名称</td> <td>商品单价</td> <td>商品颜色</td> <td>商品库存</td> <td>操作</td> </tr> </thead> <tbody> <tr> <td>2018090201</td> <td>鼠标</td> <td>78</td> <td>黑色</td> <td>500</td> <td> <input type="button" value="加入购物车" onclick="addGoods(this);" /> </td> </tr> <tr> <td>2018090202</td> <td>键盘</td> <td>45</td> <td>白色</td> <td>300</td> <td> <input type="button" value="加入购物车" onclick="addGoods(this);" /> </td> </tr> <tr> <td>2018090203</td> <td>显示器</td> <td>880</td> <td>黑色</td> <td>200</td> <td> <input type="button" value="加入购物车" onclick="addGoods(this);" /> </td> </tr> <tr> <td>2018090204</td> <td>主机</td> <td>2332</td> <td>蓝色</td> <td>350</td> <td> <input type="button" value="加入购物车" onclick="addGoods(this);" /> </td> </tr> </tbody> </table> </div> <div id="goodsPay"> <table> <caption>购 物 车</caption> <thead> <tr> <td>商品编号</td> <td>商品名称</td> <td>商品单价</td> <td>商品颜色</td> <td>购买数量</td> <td>单项小计</td> <td>操作</td> </tr> </thead> <tbody id="gwc"> </tbody> <tfoot> <tr> <td colspan="5">总计</td> <td colspan="2" id="sum">0</td> </tr> </tfoot> </table> </div> </body>
CSS代码
<style> * { margin: 0; padding: 0; } div { width: 1000px; height: 350px; border: 3px solid #ccc; margin: 5px auto; overflow: auto; } table { border-collapse: collapse; width: 100%; } td { border: 1px solid black; text-align: center; height: 30px; } caption { font-size: 28px; font-weight: bold; } #gwc input[type="text"] { width: 30px; margin-left: 4px; margin-right: 4px; } #gwc input[type="button"] { width: 20px; } </style>
JavaScript代码