//基础数据
let dataArr = [{
name: "Apple",
price: 100,
count: 1
},
{
name: "HuaWei",
price: 200,
count: 1
},
{
name: "xiaomi",
price: 300,
count: 1
},
{
name: "vivo",
price: 400,
count: 1
},
{
name: "oppo",
price: 500,
count: 1
}
];
let tbEle = document.querySelector("tbody");
//渲染tbody
function renderTB(inputIndex) {
let str = "";
let resulte = 0;
dataArr.map((item, index) => {
str += "<tr>";
str += `
<td>${index+1}</td>
<td>${item.name}</td>
<td>${item.price}</td>
<td>
<span data-index="${index}">-</span>
<input type="text" style="width:30px" value="${item.count}" data-index="${index}">
<span data-index="${index}">+</span>
</td>
<td>${item.price*item.count}</td>
`;
str += "</tr>";
resulte += item.price * item.count;
});
str += `
<tr>
<td colspan="4" style="text-align:right">合计:</td>
<td>${resulte}</td>
<div></div>
</tr>`
tbEle.innerHTML = str;
//激活input标签
// if (inputIndex != undefined) {
// let inputele = document.querySelectorAll("input");
// inputele[inputIndex].focus();
// }
}
renderTB();
//加、减功能
tbEle.addEventListener("click", psFoo);
function psFoo(e) {
let event = e || window.event;
if (event.target.innerText == "+") {
console.log(dataArr[event.target.dataset.index].count)
dataArr[event.target.dataset.index].count = ++event.target.previousElementSibling.value;
renderTB();
}
if (event.target.innerText == "-" && dataArr[event.target.dataset.index].count > 1) {
dataArr[event.target.dataset.index].count = --event.target.nextElementSibling.value;
renderTB();
}
}
input修改时进行数据渲染v1.0
tbEle.addEventListener("change", e => {
let event = e || window.event;
if (event.target.type == "text") {
dataArr[event.target.dataset.index].count = event.target.value;
renderTB();
}
});
