开发工具与关键技术：Visual Studio html css javascript
作者：华境聪
撰写时间：2019年04月13日
这里需要注意的是父级和子级的用法，还有for循环的算法相加减。喜欢的朋友可以拿去参考下。
js代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>gouwuche</title>
<script src="~/Content/jquery-2.1.4.min.js"></script>
<style>
h1 {
text-align:center;
}
table {
margin:0 auto;
width:60%;
border:2px solid #aaa;
border-collapse:collapse;
}
table th,table td {
text-align:center;
border:2px solid #aaa;
padding:5px;
}
thead {
background-color:#6699CC;
}
</style>
</head>
<body>
<h1>国际购物广场</h1>
<table border="1px" id="thing" class=" table-hover table-striped table-bordered">
<thead>
<tr>
<th>商品</th>
<th>单价</th>
<th>颜色</th>
<th>库存</th>
<th>好评率</th>
<th>操作</th>
</tr>
</thead>@*表头*@
<tbody id="tb1" class="t1class">
<tr>
<td id="0">罗技M185鼠标</td>
<td>80</td>
<td>黑色</td>
<td>666</td>
<td>98%</td>
<td align="center"><input class="btn btn-primary" type="button" value="加入购物车" "add_shoppingcar(this)"></td>
</tr>
<tr>
<td>微软X470键盘</td>
<td>150</td>
<td>黑色</td>
<td>999</td>
<td>98%</td>
<td align="center"><input class="btn btn-primary" type="button" value="加入购物车" "add_shoppingcar(this)"></td>
</tr>
<tr>
<td>苹果iphone10手机壳</td>
<td>60</td>
<td>透明</td>
<td>333</td>
<td>98%</td>
<td align="center"><input class="btn btn-primary" type="button" value="加入购物车" "add_shoppingcar(this)"></td>
</tr>
<tr>
<td>蓝牙耳机</td>
<td>100</td>
<td>蓝色</td>
<td>5651</td>
<td>99%</td>
<td align="center"><input class="btn btn-primary" type="button" value="加入购物车" "add_shoppingcar(this)"></td>
</tr>
<tr>
<td>金士顿U盘</td>
<td>79.8</td>
<td>金色</td>
<td>212</td>
<td>98%</td>
<td align="center"><input class="btn btn-primary" type="button" value="加入购物车" "add_shoppingcar(this)"></td>
</tr>
<tr>
<td id="0">罗技M1812键盘</td>
<td>180</td>
<td>黑色</td>
<td>666</td>
<td>98%</td>
<td align="center"><input class="btn btn-primary" type="button" value="加入购物车" "add_shoppingcar(this)"></td>
</tr>
</tbody>@*商品列表*@
</table>
<h1>购物车</h1>
<table border="1px" class=" table-hover table-striped table-bordered">
<thead>
<tr>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
<th>删除</th>
</tr>
</thead>@*表头*@
<tbody id="tb2">
</tbody>@*选择的商品*@
<tfoot>
<tr>
<td colspan="3" align="center">总计</td>
<td colspan="2" id="total"></td>
</tr>
</tfoot>@*收费*@
</table>
<script>
//添加进购物车
function add_shoppingcar(btn) {
var tds = $(btn).parents('tr').children('td');//返回当前tr中的td所有的元素
var name = $(tds[0]).html();//商品
var price = $(tds[1]).html();//单价
var kc = parseInt($(tds[3]).html());//parseInt() 函数可解析一个字符串，并返回一个整数。
kc = kc - 1;
$(tds[3]).html(kc);
$trtd = $('<tr>' + '<td>' +
name +
'</td>' +
'<td>' +
price +
'</td>' +
'<td align="center" class="lji">' +
'<input class="btn btn-primary" type="button" value="-" "change(this,-1)" />' +
'<input style="text-align: center" type="text" class="dclass" size="1" readonly value="1">' +
'<input class="btn btn-primary" type="button" value="+" "change(this,1)" />' +
'</td>' + '<td>' + price + '</td>' + '<td align="center">' +
'<input class="btn btn-primary" type="button" value="X" "del(this);" />' +
'</td>' + '</tr>')
$("#tb2").append($trtd);
total();
}
//总计
function total() {
var trs = $("#tb2").children("tr");//所选商品的数量
var sum = 0;//初始化为0
for (var i = 0; i < trs.length; i++) {
var tds = $(trs[i]).children("td");//第几个商品
var m = $(tds[3]).html();//金额
sum += parseFloat(m);//循环相加商品
}
$("#total").html(sum);
}
//删除
function del(btn) {
var tr1 = $('.t1class').children("tr");
for (var i = 0; i < tr1.length; i++) {
var tds = $(tr1[i]).children("td");
var kc = parseInt($(tds[3]).html());//库存数
var bs2 = $(tr1[i]).children(0).html();//获取在售商品名称
var bs = $(btn).parents('tr').children(0).html();//获取购物车商品名称
if (bs == bs2) {
var inputs = $(btn).parent().parent("tr").children().children("input");
var amount = parseInt($(inputs[1]).val());
kc = kc + amount;
$(tds[3]).html(kc);
}
}
$(btn).parent().parent().remove();
total();
}
//增加减少
function change(btn, n) {
var inputs = $(btn).parent().children("input");
var amount = parseInt($(inputs[1]).val());
if (amount <= 1 && n < 0) {//数量减少时
return;
}
$(inputs[1]).val(amount + n);
var tr1 = $('.t1class').children("tr");//商品全部的长度
for (var i = 0; i < tr1.length; i++) {
var bs = $(btn).parents('tr').children(0).html();//当前的选择商品的名称
var bs2 = $(tr1[i]).children(0).html();//第几个商品的名称
var tds = $(tr1[i]).children("td");//第几个商品的名称的所有子元素td
var kc = parseInt($(tds[3]).html());//第几个商品的名称的库存数量
if (bs == bs2) {//商品名称相同
kc = kc - n;
$(tds[3]).html(kc);//获取最新库存数
}
}
amount = $(inputs[1]).val();
var tds = $(btn).parents('tr').children('td');//找到当前选择的位置的父级tr元素的所有子元素td
var price = parseFloat($(tds[1]).html());
var m = amount * price;//数量 * 单价
$(tds[3]).html(m);
total();
}
</script>
</body>
</html>
下面可见输出截图：
加购之后，统计总金额：
删除商品后，统计总金额：