时间:2021-07-01 10:21:17 帮助过:139人阅读
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时做的,比较简单,但基本功能还是有的:
可以全选,单个选择.
可以单个的删除,删除选中项.
总计可以根据数量的变化而变化.
以上就是JavaScript实现简单的购物车代码实例的详细内容,更多请关注Gxl网其它相关文章!