简易购物车

HTML代码

<table>
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">合计:</td>
            </tr>
        </tfoot>
    </table>

JS代码

let dataArr = [
    {
        name: "Aplle",
        price: 500,
    },
    {
        name: "HUAWEI",
        price: 800,
    },
    {
        name: "XIAOMI",
        price: 600,
    },
    {
        name: "VIVO",
        price: 700,
    },

]


let tbodyEle = document.getElementsByTagName("tbody")[0];

//初始化页面
let result = 0;
dataArr.map((item, index) => {
    let str = ``;
    str += `<tr>
    <td>${index + 1}</td>
    <td>${item.name}</td>
    <td>${item.price}</td>
    <td>
    <input type="button" value="-">
    <input type="text" value="1">
    <input type="button" value="+">
    </td>
    <td class="subtotal">${dataArr[index].price}</td>    
    </tr>`
    result += dataArr[index].price;
    tbodyEle.innerHTML += str;
})

let tdEle = document.createElement("td");
// tdEle.className = "lastSub";
tdEle.innerText = result;
let trEle = document.querySelector("tfoot>tr")
trEle.appendChild(tdEle)
let subEles = document.getElementsByClassName("subtotal");
let inpEles = document.getElementsByTagName("input");

//添加监听事件
tbodyEle.addEventListener("click", e => {
    let event = e || window.event;
    if (event.target.value == "-" && event.target.nextElementSibling.value > 1) {
        event.target.nextElementSibling.value = parseInt(event.target.nextElementSibling.value) - 1;
        subEles[0].innerHTML = dataArr[0].price * event.target.nextElementSibling.value;
    }
    if (event.target.value == "+") {
        event.target.previousElementSibling.value = parseInt(event.target.previousElementSibling.value) + 1;
        subEles[0].innerHTML = dataArr[0].price * event.target.previousElementSibling.value;
    }
})

tbodyEle.addEventListener("input", e => {
    let event = e || window.event;
    if (!isNaN(event.target.value)) {
        subEles[0].innerHTML = dataArr[0].price * event.target.value;
    }
})