时间:2021-07-01 10:21:17 帮助过:24人阅读
css
<style> table{ text-align: center; } table img{ width: 50px; } a { text-decoration: none; color: red; } </style>
body
<table border="1" cellspacing="0"> <thead> <tr> <th>全选 <input type="checkbox" id="ckAll"/></th> <th>商品</th> <th>单价</th> <th>数量</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="ck"/></td> <td>![](../img2/1.png)</td> <td>3</td> <td><input type="number" max="10" min="0" step="1" value="2"/></td> <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</a></td> </tr> <tr><td><input type="checkbox" name="ck"/></td> <td>![](../img2/2.png)</td> <td>3</td> <td><input type="number" max="10" min="0" step="1" value="3"/></td> <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</a></td> </tr> <tr><td><input type="checkbox" name="ck"/></td> <td>![](../img2/3.png)</td> <td>3</td> <td><input type="number" max="10" min="0" step="1" value="1"/></td> <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</a></td> </tr></tbody> <tfoot> <tr> <td colspan="3" align="right">总价:</td> <td colspan="2"></td> </tr> </tfoot> </table> <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dels">删除选中项</a>
js
效果图
这个购物车是在学习js时做的,比较简单,但基本功能还是有的:
可以全选,单个选择.
可以单个的删除,删除选中项.
总计可以根据数量的变化而变化.
大家用在线的编辑器查看一下效果会更好.
如果有问题的话,可以随时交流... (过两天会用jQury在做一个购物车的例子)
相关推荐:
微信小程序之购物车的实现代码
JS实现的简单拖拽购物车功能
详解angular.js实现购物车功能
以上就是用JavaScript实现简易的购物车实例分享的详细内容,更多请关注Gxl网其它相关文章!