作为一名不在软件公司工作的软件工程师，不仅要会写后台代码(PHP/JAVA/SQL...)，还是兼顾前端工程师的工作(html/javascript/css...)。下面就来分享一个在实际工作项目中使用到的购物车的前端开发。
这里分享的仅仅是针对购物车的操作(产品数量的增加减少，删除购物车中产品项)，假设购物车中已经放有若干产品。闲话少说，先上两张效果图。
HTML代码如下：这里使用到了JQuery1.11和bootstrap3 。
<!DOCTYPE html> <html> <HEADER> <meta charset="UTF-8"> <title>Shopping Cart</title> <script type="text/javascript" src="https://www.jb51.net/jquery-1.11.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/demo.js"></script> <link href="https://www.jb51.net/bootstrap.min.css" media="screen" type="text/css" /> </HEADER> <body> <table > <thead> <tr> <th><label><input type="checkbox" /> 全选</label></th> <th><label>产品型号</label></th> <th><label>单价</label></th> <th><label>数量</label></th> <th><label>小计</label></th> <th><label>操作</label></th> </tr> </thead> <tbody> <tr > <td ><input type="checkbox" /> </td> <td> <label>Item 1</label> </td> <td><span>76.55</span></td> <td> <span>-</span> <input type="text" value="10" /> <span>+</span> </td> <td>101</td> <td><span>删除</span></td> </tr> <tr> <td ><input type="checkbox" /></td> <td> <label>Item 2</label> </td> <td><span>1100</span></td> <td> <span>-</span> <input type="text" value="1" /> <span>+</span> </td> <td>352</td> <td><span>删除</span></td> </tr> <tr> <td ><input type="checkbox" /></td> <td> <label>Item 3</label> </td> <td><span>1200</span></td> <td> <span>-</span> <input type="text" value="1" /> <span>+</span> </td> <td>9876.55</td> <td><span>删除</span></td> </tr> <tr> <td ><input type="checkbox" /></td> <td> <label>Item 4</label> </td> <td><span>1400</span></td> <td> <span>-</span> <input type="text" value="1" /> <span>+</span> </td> <td>9876.55</td> <td><span>删除</span></td> </tr> </tbody> </table> <div> <div> <div> <div> <label>金额合计:<span>￥</span><span>0.00</span></label> </div> <div> <label>您选择了<span></span>种产品型号，共计<span></span>件</label> </div> <div> <span></span> </div> </div> </div> </div> </body> </html>
HTML代码主要分为两大块，TABLE部分用于显示购物车内的产品明细，在其后使用了一个DIV用于显示汇总信息。这里使用了一个技巧需要特别说明一下：
1.为元素指定一些虚假的class名称(样式表中不存在的样式名称)，方便使用JQuery的过滤器找到特定元素。如上述代码中的样式check-all / check-one / cart / subtotal
Javascript代码需要实现以下几个功能：
1.产品全选功能
2.计算产品小计（即产品单价 ＊ 购买数量）
3.用户选中购物车中的某个产品型号，需要重新计算页面下方的汇总信息，包括选中的产品型号种类、产品数量小计和金额小计
4.用户删除购物车中某个产品型号，或是修改购买数量时，需要重新计算页面下方的汇总信息。
下面就以上功能一一说明：
1.产品全选功能
$(cartTable).find(":checkbox").click(function() { //全选框单击 if ($(this).hasClass("check-all")) { var checked = $(this).prop("checked"); $(cartTable).find(".check-one").prop("checked", checked); } //如果手工一个一个的点选了所有勾选框，需要自动将“全选”勾上或是取消 var items = cartTable.find("tr:gt(0)"); $(cartTable).find(".check-all").prop("checked", items.find(":checkbox:checked").length == items.length); getTotal(); });