最近由于工作需要的原因，开始系统学习jQuery的知识，然后跟着一个视频教程做了一个购物车的功能，现总结如下。
第一步：准备HTML页面，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<title>购物车</title>
<style type="text/css">
h1{
text-align:center}
table{
margin:0 auto;
width:60%;
border:2px solid #09C;
border-collapse:collapse}
table th,table td{
border:2px solid #09C;
padding:5px;
}
th{
background-color:#0CC;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h1>真划算</h1>
<table>
<tr>
<th>商品</th>
<th>单价</th>
<th>颜色</th>
<th>库存</th>
<th>好评率</th>
<th>操作</th>
</tr>
<tr>
<td>罗技鼠标</td>
<td>80</td>
<td>黑色</td>
<td>893</td>
<td>98%</td>
<td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td>
</tr>
<tr>
<td>微软键盘</td>
<td>150</td>
<td>黑色</td>
<td>100</td>
<td>98%</td>
<td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td>
</tr>
<tr>
<td>手机壳</td>
<td>60</td>
<td>透明</td>
<td>200</td>
<td>98%</td>
<td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td>
</tr>
<tr>
<td>耳机</td>
<td>100</td>
<td>蓝色</td>
<td>302</td>
<td>98%</td>
<td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)"/></td>
</tr>
</table>
<h1>购物车</h1>
<table>
<thead>
<tr>
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>金额</td>
<td>删除</td>
</tr>
</thead>
<tbody id="goods">
<!--
<tr>
<td>罗技鼠标</td>
<td>80</td>
<td>
<input type="button" value="-"/>
<input type="text" size="3" readonly="readonly"/>
<input type="button" value="+"/>
</td>
<td>80</td>
<td align="center">
<input type="button" value="*"/>
</td>
</tr>-->
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">总计</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
第二步：实现增加物品的功能代码：
<script type="text/javascript">
function addShopping(btn){
var tds=$(btn).parent().siblings();//获取当前元素的父节点的全部兄弟节点，就是当前这行的所有td
var name=$(tds).eq(0).text();//获取商品名称的td的文本值
var price=$(tds).eq(1).text();//获取商品价格的td的文本值
var html = $("<tr>" //开始拼接HTML元素，将取到的东西展示到对用的input中
+"<td>"+name+"</td>"
+"<td>"+price+"</td>"
+"<td>"
+"<input type=‘button‘ value=‘-‘/>"
+"<input type=‘text‘ size=‘3‘ readonly=‘readonly‘/>"
+"<input type=‘button‘ value=‘+‘/>"
+"</td>"
+"<td>"+price+"</td>"
+"<td align=‘center‘>"
+"<input type=‘button‘ value=‘*‘/>"
+"</td></tr>");
$("#goods").append(html);
}
第三步：实现将购物车中的物品删除的基本功能
function deletShopping(btn){//给上一步你拼接的删除按钮上绑定一个这样的方法
$(btn).parent().parent().remove();
}
第四步：增加物品和删除物品的基本功能完成以后，我们就要开始处理细节问题了，同一件物品的增加或者减少
function increas(btn){
var text=$(btn).prev();
var acount = parseInt($(text).val());
$(text).val(++acount);
//获取单价
var tds = $(text).parent().siblings();
var price = parseInt($(tds).eq(1).text());
//获取总价
var sum = price*acount;
$(tds).eq(2).text(sum);
}
function decrease(btn){
var text=$(btn).next();
var acount = parseInt($(text).val());
$(text).val(--acount);
if(acount<1){
return;
}
//获取单价
var tds = $(text).parent().siblings();
var price = parseInt($(tds).eq(1).text());
//获取总价
var sum = price*acount
$(tds).eq(2).text(sum);
}
最后，算所有商品合计：
function total(){
var trs = $("#goods tr");
var sum=0;
for(var i=0;i<trs.length;i++){
var td = trs.eq(i).children().eq(3);
var price = parseInt($(td).text());
//alert(price);
sum = sum + price;
}
$("#total").text(sum);
}
然后将total方法放在前四个方法后面，每次事件触发都要调用合计的方法。
好了，到这里呢，一个简单的购物车功能就做完了，最后附图一张，大功告成！
时间： 2024-12-27 10:30:15