JavaScript实现简单的购物车代码实例

来源：动视网责编：小采时间：2020-11-27 20:11:48

JavaScript实现简单的购物车代码实例

JavaScript实现简单的购物车代码实例:下面是我做的一个超简单的购物车,全部都是用原生js做的css<style> table{ text-align: center; } table img{ width: 50px; } a { text-decoration: none; color: red; } </style>body<table

推荐度：

点击下载本文 文档为doc格式

导读JavaScript实现简单的购物车代码实例:下面是我做的一个超简单的购物车,全部都是用原生js做的css<style> table{ text-align: center; } table img{ width: 50px; } a { text-decoration: none; color: red; } </style>body<table

下面是我做的一个超简单的购物车,全部都是用原生js做的

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>

效果图