您的位置：首页 > Web前端 > JQuery

JavaScript、JQuery简单实现购物车功能

2018-01-31 16:47 645 查看

食用前先导入JQuery文件

<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {
text-align:center;
}
table {
margin:0 auto;
width:40%;
border:2px solid #aaa;
border-collapse:collapse;
}
table th, table td {
border:2px solid #aaa;
padding:5px;
}
th {
background-color:#eee;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
//加入购物车
function add_shoppingcart(btn){
//obj.eq(i)== $(obj[i])
//获取商品名
var name=$(btn).parent().siblings().eq(0).html();//DOM对象强转成jquery对象
//获取单价
var price=$(btn).parent().siblings().eq(1).html();
//拼一行
var tr=
'<tr>'+
'<td>'+name+'</td>'+
'<td>'+price+'</td>'+
'<td align="center">'+
'<input type="button" value="-" onclick="decrease(this);"/>'+
'<input type="text" size="3" readonly value="1"/>'+
'<input type="button" value="+" onclick="increase(this);"/>'+
'</td>'+
'<td>'+price+'</td>'+
'<td align="center"><input type="button" value="x" onclick="del(this);"/></td>'+
'</tr>';
//追加此行
$("#goods").append($(tr));
sum();
}
//加法
function increase(btn){
//获取数量
var n=$(btn).prev().val();
//+1,再写入框内
$(btn).prev().val(++n);
//获取单价
var p=$(btn).parent().prev().html();
//计算金额并写入金额列
$(btn).parent().next().html(p*n);
sum();
}
//减法
function decrease(btn){
var n=$(btn).next().val();
//数量不能小于1
if(n<= 1) {
return;
}
$(btn).next().val(--n);
var p=$(btn).parent().prev().html();
$(btn).parent().next().html(p*n);
sum();
}
//删除
function del(btn){
var s=$(btn).parent().parent();
$(s).remove();
sum();
}
//求和
function sum(){
//获取tbody下所有的行
var $trs = $("#goods tr");
console.log($trs);
console.log($trs.length);
//遍历他们
var sum = 0;
for(var i=0;i<$trs.length;i++) {
//获取每一行
var $tr = $trs.eq(i);
console.log($tr);
//获取该行中第4列的值(金额/String)
var mny =
$tr.children().eq(3).html();
// tds td3 金额
console.log(mny);
sum += parseFloat(mny);
}
console.log(sum);
//将合计值写入合计列
$("#total").html(sum);
};
</script>
</head>
<body>
<h1>巨划算</h1>
<table>
<tr>
<th&
899f
gt;商品</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="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>夏日爆款松糕鞋</td>
<td>150</td>
<td>白色</td>
<td>9028</td>
<td>96%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>iphone6手机壳</td>
<td>60</td>
<td>透明</td>
<td>672</td>
<td>99%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>无线鼠标</td>
<td>100</td>
<td>蓝色</td>
<td>8937</td>
<td>95%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>三叶草新款运动鞋</td>
<td>670</td>
<td>红色</td>
<td>482</td>
<td>100%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
</table>

<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>数量</th>
<th>金额(元)</th>
<th>删除</th>
</tr>
</thead>
<tbody id="goods">
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">总计</td>
<td id="total">0</td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航