网页 购物车 简易
功能
- 商品全选反选
- 商品价格排序
- 商品数量加减
- 输入框正则表达式排除文字
- 验证输入是否为零
- 价格计算
- 删除选定商品
HTML结构
- form表单里包着table表格
- form表单传递参数
- table排版
- 第一行里装着全选功能按钮、排序功能按钮、删除功能按钮
- 中间的每一行(tr)即为商品
- 选定、商品图片、商品细节、数量加减、价格显示
- 最后一行里是价格合计的显示、付款的按钮(form表单提交)
功能实现
全选反选、价格排序、数量加减、价格计算各封装为函数模块。
相互关联体现在例如:
- 在每个对价格产生影响的模块里调用价格计算。
- 价格计算模块计算被选定的商品。
关系图
箭头所指为影响到的模块
以下是页面效果动图以及代码
效果图
html代码
<div class="cart-main">
<div class="w">
<div class="title">
<h2>购物车</h2>
</div>
<form action="" method="post">
<table>
<!-- 功能行 -->
<thead>
<tr>
<!-- 全选反选 -->
<td class="col1">
<label>
<input type="checkbox" name="" class="check_all" checked="checked">
全选
</label>
</td>
<!-- 价格排序按钮 -->
<td>
<input type="button" value="价格排序" class="sort">
</td>
<!-- 删除功能按钮 -->
<td colspan="3">
<input type="button" value="删除所选" class="delPro fr">
</td>
</tr>
</thead>
<tbody>
<!-- 商品 -->
<tr class="items">
<!-- 选择按钮 -->
<td>
<input type="checkbox" name="" class="check">
</td>
<!-- 商品图片 -->
<td class="pic">
<img src="upload/20160809110859252.jpg" alt="">
</td>
<!-- 商品细节 -->
<td class="details">
<h3>产品名xxxx</h3>
<p>描述描述描述描述描述描述</p>
</td>
<!-- 数量操作 -->
<td class="sum_btn">
<i class="plus fl">+</i>
<input type="text" class="sum fl" value="1" name="item_sum">
<i class="sub fl">-</i>
</td>
<!-- 价格显示 -->