html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="style/shopping.css">
<script type="text/javascript" src="style/jquery-3.3.1.js"></script>
<script>
$(function(){
$.ajax({
type: "GET",
url: "./style/goods.json",
dataType: "json",
success:function(result){
add(result);
}
});
})
function add(result){
$.each(result.data, function(obj){
//console.log(result.data[obj].count);
let str = '<tr>' +
'<td><input type="checkbox" name="select"></td>' +
'<td>' + result.data[obj].name + '</td>' +
'<td>￥<strong>' + result.data[obj].price + '</strong></td>' +
'<td>' +
'<input type="button" value="-" name="sub" disabled="disabled">' +
'<input type="text" name="inputNum" class="inputNum" value="1">' +
'<input type="button" value="+" name="add">' +
'</td>' +
'<td><em name="em">￥' + result.data[obj].count + '</em></td>' +
'<td><a name="delete" href="javascript:;">删除</a></td>' +
'</tr>';
let row = $(str);
//被选中的计算总和
let selectAll = document.getElementById("selectAll");
let $select = $(row).find("input[name='select']");
$("#goods").append(row);
$select.click(function(){
selectAll.checked = true;
countNum = 0;
sum = 0;
part();
if(!$select.checked){
selectAll.checked = false;
}
});
//console.log($select);
});
}
</script>
<script type="text/javascript" src="style/shopping.js"></script>
</head>
<body>
<table id="goods">
<tr>
<th><input type="checkbox" id="selectAll">全选</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
<th>操作</th>
</tr>
</table>
<br/><br/>
<div class="sum">
已选商品<em name="em">0</em>件，合计<em name="em">0.00</em>元。
</div>
</body>
</html>
js代码
//获取单价，计算金额
function count(){
let strong = document.getElementsByTagName("strong");
let em = document.getElementsByTagName("em");
let inputNum = document.getElementsByName("inputNum");
let money = 0;
for(let i = 0; i < strong.length; i++){
//console.log(strong[i].innerHTML);
money = strong[i].innerHTML * inputNum[i].value;
money = money.toFixed(2);
em[i].innerHTML = "￥" + money;
}
}
//计算总额
function part(){
let strong = document.getElementsByTagName("strong");
let em = document.getElementsByTagName("em");
let inputNum = document.getElementsByName("inputNum");
let select = document.getElementsByName("select");
let countNum = 0;
let sum = 0;
for(let i = 0; i < select.length; i++){
if(select[i].checked){
sum = sum + strong[i].innerHTML * inputNum[i].value;
countNum = countNum + parseInt(inputNum[i].value);
}
}
sum = sum.toFixed(2);
em[em.length - 2].innerHTML = countNum;
em[em.length - 1].innerHTML = sum;
}
//绑定响应函数，并解决兼容性问题
function bind(obj, eventStr, callback){
if(obj.addEventListener){
obj.addEventListener(eventStr, callback, false);
}else{
obj.attachEvent("on" + eventStr, function(){
callback.call(obj);
});
}
}
window.onload = function(){
//给“+”、“-”绑定事件
//事件委派
//let add = document.getElementsByName("add")[0];
let table = document.getElementsByTagName("table")[0];
bind(table, "click", function(event){
// console.log(event);
//获取当前行
let tr = event.target.parentNode.parentNode;
// console.log(tr.childNodes[3].childNodes[0]);
let input = tr.childNodes[3].childNodes[1];
let subNum = tr.childNodes[3].childNodes[0];
// let a = tr.childNodes[5].childNodes[0];
// console.log(name);
if(event.target.name === "add"){
input.value++;
if(input.value > 1){
subNum.disabled = false;
}
count();
part();
}else if(event.target.name === "sub"){
input.value--;
if(input.value == 1){
subNum.disabled = true;
}
count();
part();
}else if(event.target.name === "delete"){
//删除
let name = tr.getElementsByTagName("td")[1].innerHTML;
let flag = confirm("确认删除" + name + "？");
if(flag){
tr.parentNode.removeChild(tr);
}
part();
}
});
//全选操作
//console.log(selectAll.checked);
let em = document.getElementsByTagName("em");
let selectAll = document.getElementById("selectAll");
let select = document.getElementsByName("select");
selectAll.onclick = function(){
for(let i = 0; i < select.length; i++){
select[i].checked = this.checked;
}
if(this.checked){
part();
}else{
em[em.length - 2].innerHTML = 0;
em[em.length - 1].innerHTML = "0.00";
}
};
};
