<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现购物车动态操作</title>
<script src="jquery-3.2.1.min.js"></script>
<style>
table{width:600px; text-align:center;
border-collapse:collapse;
}
td,th{border:1px solid black}
td[colspan="3"]{text-align:right;}
</style>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone6</td>
<td>¥<span>4488</span></td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥<span>4488</span></td>
</tr>
<tr>
<td>iPhone6 plus</td>
<td>¥<span>5288</span></td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥<span>5288</span></td>
</tr>
<tr>
<td>iPad Air 2</td>
<td>¥<span>4288</span></td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥<span>4288</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total:</td>
<td>¥<span>14064</span></td>
</tr>
</tfoot>
</table>
<script>
// 1. 为button绑定click事件
$("button").click(function(event){
// 判断当前是-还是+
var elem = event.target;
if($(elem).text() == "+"){
// 修改span元素的文本内容
var num = parseInt($(elem).prev().text());
$(elem).prev().text(num+1);
}else{
var num = parseInt($(elem).next().text());
$(elem).next().text(num-1);
// num=0
if(num == 0){
$(elem).next().text("0");
}
}
// 修改小计的值
// 数量
var number = parseInt($(elem).parent().children("span").text());
// 单价
var price = parseInt($(elem).parent().prev().children("span").text());
// 修改小计
$(elem).parent().next().children("span").text(number*price);
// 合计
var $spans = $("#data>tbody>tr :last-child>span");
// 遍历
var total = 0;
for(var i=0;i<$spans.length;i++){
var span = $spans[i];
var num = parseInt($(span).text());
total += num;
}
$("#data>tfoot>tr>td:last>span").text(total);
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现购物车动态操作</title>
<script src="jquery-3.2.1.min.js"></script>
<style>
table{width:600px; text-align:center;
border-collapse:collapse;
}
td,th{border:1px solid black}
td[colspan="3"]{text-align:right;}
</style>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone6</td>
<td>¥<span>4488</span></td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥<span>4488</span></td>
</tr>
<tr>
<td>iPhone6 plus</td>
<td>¥<span>5288</span></td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥<span>5288</span></td>
</tr>
<tr>
<td>iPad Air 2</td>
<td>¥<span>4288</span></td>
<td>
<button>-</button>
<span>1</span>
<button>+</button>
</td>
<td>¥<span>4288</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total:</td>
<td>¥<span>14064</span></td>
</tr>
</tfoot>
</table>
<script>
// 1. 为button绑定click事件
$("button").click(function(event){
// 判断当前是-还是+
var elem = event.target;
if($(elem).text() == "+"){
// 修改span元素的文本内容
var num = parseInt($(elem).prev().text());
$(elem).prev().text(num+1);
}else{
var num = parseInt($(elem).next().text());
$(elem).next().text(num-1);
// num=0
if(num == 0){
$(elem).next().text("0");
}
}
// 修改小计的值
// 数量
var number = parseInt($(elem).parent().children("span").text());
// 单价
var price = parseInt($(elem).parent().prev().children("span").text());
// 修改小计
$(elem).parent().next().children("span").text(number*price);
// 合计
var $spans = $("#data>tbody>tr :last-child>span");
// 遍历
var total = 0;
for(var i=0;i<$spans.length;i++){
var span = $spans[i];
var num = parseInt($(span).text());
total += num;
}
$("#data>tfoot>tr>td:last>span").text(total);
});
</script>
</body>
</html>
1177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
