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>shop</title>
<link rel="stylesheet" href="css/shop.css">
</head>
<body>
<script src="js/shop.js"></script>
<script>
// 新建數據
var obj = [
{
select: false,
img:"img/1.jpg",//圖片路徑
name: "OPPO R11 全網通4G 雙卡雙待手機玫瑰金色",
price: 2799,
num: 1,
sum: 0,
del: false
},
{
select: false,
img:"img/2.jpg",//圖片路徑
name: "Apple iPhone8 64G 金色 移動聯通電信4G手機",
price: 5888,
num: 1,
sum: 0,
del: false
}
];
// 實例化對象，傳入數據
var table = new Table(obj);
</script>
</body>
</html>
Css：
*{
margin: 0;
padding: 0;
}
table{
width: 1200px;
/* background: lightcoral; */
margin: 50px auto;
}
tr:nth-child(1){
background: #F3F3F3;
height: 26px;
}
img{
height: 30%;
vertical-align: middle;
}
img+span{
font-size: 10px;
}
td{
text-align: center;
vertical-align: middle;
}
tr td:nth-child(2){
text-align: left;
}
tr td:nth-child(4) div button{
height: 20px;
width: 20px;
border: none;
text-align: center;
vertical-align: middle;
}
tr td:nth-child(4) div input{
height: 20px;
width: 27px;
vertical-align: middle;
}
tr td:nth-child(3),tr td:nth-child(5){
width: 100px;
}
table>div{
width: 300px;
text-align: right;
}
JS：
function Table(obj) {
this.obj = obj; //引入數組對象
this.init(obj); //入口函數
}
Table.prototype = {
table: null, //初始化表格
allSum: 0, //商品總和
allNum: 0, //商品數量總和
allselect: false, //全選
init: function (obj) {
this.createTab(obj); //創建表格
},
createTab: function (obj) {
if (this.table) { //初始化表格，若表格存在，則刪除表格再新建
this.table.remove();
this.table = null;
}
this.table = document.createElement("table"); //創建表格
var thr = document.createElement("tr"); //創建表格標題
var selectAll = document.createElement("th");
var selectAllInput = document.createElement("input"); //全選
selectAllInput.self = this;
selectAllInput.addEventListener("change", this.selectHandler); //添加事件，當全選建改變時觸發
selectAllInput.type = "checkbox";
selectAllInput.checked = this.allselect; //給其選中添加值，讓數據驅動更改選中狀態
selectAll.textContent = "全選";
selectAll.appendChild(selectAllInput);
thr.appendChild(selectAll); //createName方法添加表頭內容
this.createName("商品", thr);
this.createName("單價", thr);
this.createName("數量", thr);
this.createName("小計", thr);
this.createName("操作", thr);
this.table.appendChild(thr);
for (var i = 0; i < obj.length; i++) { //根據數組對象創建表格
var tr = document.createElement("tr");
for (var str in obj[i]) { //跳過name那項（因為里面有兩個屬性，后面會講到）
if (str === "name") continue;
var td = document.createElement("td");
if (str === "select") { //當屬性名為select時創建多選按鈕，添加更改時觸發的事件
var select = document.createElement("input");
select.type = "checkbox";
select.self = this;
select.index = i; //傳遞當前點擊索引
select.addEventListener("change", this.selectHandler);
select.checked = obj[i].select; //給其選中添加值，讓數據驅動更改選中狀態
td.appendChild(select);
} else if (str === "img") { //當屬性名為img時創建圖片以及商品名
var img = new Image();
img.src = obj[i][str];
var name = document.createElement("span");
name.textContent = obj[i].name;
td.appendChild(img);
td.appendChild(name);
} else if (str === "price") { //當屬性名為price時創建價格，同樣數據驅動
td.price = obj[i][str];
td.textContent = td.price;
} else if (str === "num") { //數據驅動商品的個數
var num = document.createElement("div");
num.index = i;
num.data = obj; //將數據賦給num（后面會用到）
num.self = this;
//創建-和+按鈕，以及文本框，改變商品個數
var left = document.createElement("button");
var text = document.createElement("input");
var right = document.createElement("button");
left.textContent = "-";
right.textContent = "+";
text.value = obj[i].num;
//添加事件，當點擊+或-時觸發事件，當文本框中失焦觸發另一個事件
left.addEventListener("click", this.changeNum);
text.addEventListener("blur", this.changeNum);
right.addEventListener("click", this.changeNum);
num.appendChild(left);
num.appendChild(text);
num.appendChild(right);
td.appendChild(num);
} else if (str === "sum") { //新建單商品的總價（個數乘以單價）
var sum = document.createElement("div");
sum.data = obj[i]; //將該商品的數據傳遞
sum.textContent = obj[i].num * obj[i].price;
td.appendChild(sum);
} else if (str === "del") { //新建刪除按鈕
var del = document.createElement("button");
del.textContent = "Del";
del.data = obj; //將該商品的數據傳遞
del.index = i; //該項的索引通過事件傳遞
del.self = this;
del.addEventListener("click", this.delHandler); //刪除事件
td.appendChild(del);
}
tr.appendChild(td);
}
this.table.appendChild(tr);
}
this.addAll(obj, this.table); //根據更新的表格數據新建商品總價及總個數
document.body.appendChild(this.table);
return this.table;
},
addAll: function (obj, parent) { //商品總價及總個數
var addAllItem = document.createElement("div");
var addAllPrice = document.createElement("div");
var sum = 0; //初始化總價及數量
var price = 0;
for (var i = 0; i < obj.length; i++) {
sum += obj[i].num;
price += obj[i].price * obj[i].num; //求總價和總和
}
addAllItem.textContent = "總數:" + sum;
addAllPrice.textContent = "總價:" + price;
parent.appendChild(addAllItem);
parent.appendChild(addAllPrice);
},
createName: function (text, parent) { //createName方法添加表頭內容
var item = document.createElement("th");
item.textContent = text;
parent.appendChild(item);
return item;
},
changeNum: function (e) {
if (this.textContent === "+") { //當點擊+按鈕使數組對象中的商品數加一，當商品數量大於99就不再增加
this.parentNode.data[this.parentNode.index].num++;
if (this.parentNode.data[this.parentNode.index].num > 99) {
this.parentNode.data[this.parentNode.index].num = 99;
}
} else if (this.textContent === "-") { //當點擊-按鈕使數組對象中的商品數減一，當商品數量小於0就不再減少
this.parentNode.data[this.parentNode.index].num--;
if (this.parentNode.data[this.parentNode.index].num < 1) {
this.parentNode.data[this.parentNode.index].num = 1;
}
} else { //當在文本框輸入個數時對數組對象中的商品數進行操作
if (isNaN(this.value)) { //當輸入的不為數值時，使其變成1
this.parentNode.data[this.parentNode.index].num = 1;
} else if (Number(this.value) > 99) { //當輸入的大於99時，使其變成99
this.parentNode.data[this.parentNode.index].num = 99;
} else if (Number(this.value) < 1) { //當輸入的小於1時，使其變成1
this.parentNode.data[this.parentNode.index].num = 1;
} else { //否則直接讓對象中的數值等於輸入的值
this.parentNode.data[this.parentNode.index].num = Number(this.value);
}
}
this.parentNode.self.init(this.parentNode.data); //根據更改后的數據驅動創建表格
},
delHandler: function (e) {
this.data.splice(this.index, 1); //刪除當前選擇的那項,根據更改后的數據驅動創建表格
this.self.init(this.data);
},
selectHandler: function (e) { //全選時使所有的單選框都根據數據更改
if (this.parentNode.textContent === "全選") {
this.self.allselect = !this.self.allselect;
for (var i = 0; i < this.self.obj.length; i++) {
this.self.obj[i].select = this.self.allselect;
}
} else {
var sum = 1; //當所有的單選框選中的值為true時，將全選選中(true是1，false是0)
this.self.obj[this.index].select = !this.self.obj[this.index].select;
for (var i = 0; i < this.self.obj.length; i++) {
sum *= this.self.obj[i].select;
}
if (sum) {
this.self.allselect = true;
} else {
this.self.allselect = false;
}
}
this.self.init(this.self.obj); //根據更改后的數據驅動創建表格
console.log(this.checked);
}
};
Table.prototype.constructor = Table;
