js仿淘宝购物车

仿淘宝购物车的制作
html：部分

<main>
        <header>
            <img src="./img/taobao_logo.gif" alt="">
            <p>您的位置
                <a href="#"> 首页》</a>
                <a href="#">我的淘宝》</a> 我的购物车
            </p>
            <img src="./img/Snipaste_2021-01-08_17-29-06.png" alt="" class="selfimg">
        </header>
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" class="all">全选
                    </th>
                    <th>店铺宝贝</th>
                    <th>获积分</th>
                    <th>单价（元）</th>
                    <th>数量</th>
                    <th>小记（元）</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
            <tfoot>
                <tr>
                    <td>
                        <input type="button" value="删除所选">
                    </td>
                    <td colspan="6">
                        <p></p>
                        <p></p>
                        <img src="./img/taobao_subtn.jpg" alt="">
                    </td>
                </tr>
            </tfoot>
        </table>
    </main>

js（核心代码部分）

let arr = [{ 
   
        shop: '纤巧百媚时尚鞋坊',
        seller: '纤巧百媚',
        img: "./img/taobao_cart_01.jpg",
        intro: '日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色',
        color: '棕色',
        size: '37',
        icon1: "./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg",
        point: 5,
        price: 138,
        count: 1,
        state: false
    },
    { 
   
        shop: '香港我的美丽日记',
        seller: 'lokemick2009',
        img: "./img/taobao_cart_02.jpg",
        intro: 'chanel/香奈儿/香奈儿炫亮魅力唇膏3.5g',
        icon1: "./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg",
        icon2: "./img/taobao_icon_02.jpg",
        point: 12,
        price: 265,
        count: 1,
        state: false
    },
    { 
   
        shop: '实体经营',
        seller: '林颜店铺',
        img: "./img/taobao_cart_03.jpg",
        icon1: "./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg,./img/taobao_icon_01.jpg",
        icon2: "./img/taobao_icon_02.jpg",
        intro: '蝶妆海蜇精华粉底液10#（象牙白）',
        point: 3,
        price: 138,
        count: 1,
        state: false
    },
    { 
   
        shop: '红痘痘的小屋',
        seller: 'taobao豆豆',
        img: "./img/taobao_cart_04.jpg",
        intro: '相宜促销专供 daS推荐 最好用LilyBell化妆棉',
        icon1: "",
        icon2: "./img/taobao_icon_01.jpg",
        point: 12,
        price: 12,
        count: 2,
        state: false
    }
];
let tbEle = document.getElementsByTagName("tbody")[0];

function renderArr(inputIndex) { 
   
    tbEle.innerHTML = "";
    let str = "";
    let money = 0;
    let point = 0;
    let i = 1;
    arr.map((item, index) => { 
   
        console.log(i++, item.state);
        str += `<tr> <td>店铺：</td> <td>${ 
     item.shop}</td> <td>${ 
     item.seller}</td> <td><img src="./img/taobao_relation.jpg" alt="${ 
     index}"></td> </tr>`;
        str += `<tr>`;
        //如果被选中则添加checked
        if (item.state) { 
   
            str += `<td><input class="check" type="checkbox" data-index="${ 
     index}" checked></td>`;
        } else { 
   
            str += `<td><input class="check" type="checkbox" data-index="${ 
     index}"></td>`;
        }

        str += `<td> <img src="${ 
     item.img}" alt="${ 
     index}"> <div> <p>${ 
     item.intro}</p> <p>颜色：${ 
     item.color}尺码：${ 
     item.size}</p>`;

        str += `保障`
        item.icon1.split(",").map(item =>
            str += `<img src="${ 
     item}">`
        )
        str += `</div> </td> <td>${ 
     item.point}</td> <td>${ 
     item.price}</td> <td> <span data-index=${ 
     index}>-</span> <input type="text" style="width:40px" data-index=${ 
     index} value="${ 
     item.count}" > <span data-index=${ 
     index}>+</span> </td> <td>${ 
     item.price*item.count}</td> <td><span data-index=${ 
     index} >删除</span></td> </tr>`;
        //合计与积分只累加被选中的商品
        if (item.state) { 
   
            money += item.price * item.count;
            point += item.point * item.count;
        }
    });
    tbEle.innerHTML = str;
    let pEles = document.querySelectorAll("tfoot p");
    pEles[0].innerHTML = `商品总价（不含运费）:${ 
     money}元`;
    pEles[1].innerHTML = `可获得积分${ 
     point}点`;

    //当数量是手动输入时，重新获取焦点
    if (inputIndex != undefined) { 
   
        let inputEles = document.querySelectorAll("input[type='text']");
        inputEles[inputIndex].value = "";
        inputEles[inputIndex].value = arr[inputIndex].count;
        inputEles[inputIndex].focus();
    }
}

renderArr();
let tableEle = document.querySelector("table");

//table后代节点被点击触发
tableEle.addEventListener("click", e => { 
   
    //获取所有多选框（除全选）
    let inputEles = document.getElementsByClassName("check");
    let allEle = document.querySelector(".all");
    let event = e || window.event;
    //删除单个商品
    if (event.target.innerText == "删除") { 
   
        arr.splice(event.target.dataset.index, 1);
        renderArr();
    }
    //删除单个或多个商品
    if (event.target.value == "删除所选") { 
   
        //遍历所有的被选中的多选框，原数据中state为true;
        [...inputEles].map((item, index) => { 
   
            if (item.checked) { 
   
                arr[index].state = true;
            }
        })
        arr = arr.filter(item => !item.state);
        allEle.checked = false;
        renderArr();
    }
    //选中或取消所有商品
    if (event.target.className == "all") { 
   
        if (event.target.checked) { 
   
            [...inputEles].map((item, index) => { 
   
                item.checked = true;
                arr[index].state = true;
            });
        } else { 
   
            [...inputEles].map((item, index) => { 
   
                item.checked = false;
                arr[index].state = false;
            });
        }
    }
    //判定每个多选框是不是都被选中
    allEle.checked = ([...inputEles].every(item => item.checked) && [...inputEles].length != 0) ? true : false;
    //判定加数量
    if (event.target.innerText == "+") { 
   
        arr[event.target.dataset.index].count = ++event.target.previousElementSibling.value;
        arr[event.target.dataset.index].state = inputEles[event.target.dataset.index].checked;
        console.log(event.target.dataset.index);
        renderArr();
        console.log(arr);
    }
    if (event.target.innerText == "-" && event.target.nextElementSibling.value > 1) { 
   
        arr[event.target.dataset.index].count = --event.target.nextElementSibling.value;
        arr[event.target.dataset.index].state = inputEles[event.target.dataset.index].checked;
        renderArr();
    }
    //设置被选中商品元数据的state为true
    if (event.target.className == "check") { 
   
        [...inputEles].map((item, index) => { 
   
            arr[index].state = item.checked ? true : false;
        });
        renderArr();
    }
});

//手动输入数量触发
tableEle.addEventListener("input", e => { 
   
    let event = e || window.event;
    if (event.target.type == "text") { 
   
        arr[event.target.dataset.index].count = event.target.value;
        renderArr(event.target.dataset.index);
    }
})