JS_购物车列表—全选+删除

1.数据取自数组中的对象

2.图片存放在简书的图床中

• 效果图

购物车列表——全选+删除.png

• JS代码

// 初始化data数组
var data = [{
    id: 1001,
    checked: true,
    name: "饼干",
    icon: "https://upload-images.jianshu.io/upload_images/19000302-fc3e0f6b8826a962.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
    price: 24,
    num: 1,
    total: 24,
    deleted: false
}, {
    id: 1002,
    checked: false,
    name: "苹果",
    icon: "https://upload-images.jianshu.io/upload_images/19000302-21ce1a8776a3a44a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
    price: 5.5,
    num: 3,
    total: 24,
    deleted: false

}, {
    id: 1003,
    checked: false,
    name: "橘子",
    icon: "https://upload-images.jianshu.io/upload_images/19000302-810af167270d5ae9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
    price: 6.6,
    num: 2,
    total: 24,
    deleted: false

}, {
    id: 1004,
    checked: true,
    name: "香蕉",
    icon: "https://upload-images.jianshu.io/upload_images/19000302-f6bff0f6fd01eb33.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
    price: 3.3,
    num: 1,
    total: 24,
    deleted: false

}, {
    id: 1005,
    checked: false,
    name: "山竹",
    icon: "https://upload-images.jianshu.io/upload_images/19000302-667b6a70ef77ce4f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
    price: 24,
    num: 1,
    total: 24,
    deleted: false

}, {
    id: 1006,
    checked: false,
    name: "榴莲",
    icon: "https://upload-images.jianshu.io/upload_images/19000302-8f802d5c4b8dd115.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
    price: 24,
    num: 1,
    total: 24,
    deleted: false

}, {
    id: 1007,
    checked: false,
    name: "葡萄",
    icon: "https://upload-images.jianshu.io/upload_images/19000302-97ef8d6a2f8ec026.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
    price: 24,
    num: 1,
    total: 24,
    deleted: false

}]

// 将CSS样式设置为对象形式添加
var tdStyle = {
    width: "100px",
    height: "100px",
    textAlign: "center",
    fontSize: "40px",
    lineHeight: "40px",
    border: "1px solid #000",
    borderCollapse: "collapse",
}

var chkStyle = {
    width: "30px",
    height: "30px",
    textAlign: "center",
}

var tableStyle = {
    borderCollapse: "collapse"
}

var txtStyle = {
    width: "50px",
    height: "30px",
    margin: "0 10px",
    textAlign: "center",
    fontSize: "26px",
    padding: "5px"
}

var imgStyle = {
    width: "60px"
}

var btnStyle = {
    fontSize: "28px",
    padding: "4px 8px",
    textAlign: "center"
}

var numStyle = {
    width: "180px"
}

// 调用函数
init();

function init() {
    creteTable();
    check();
}

function creteTable() {
    var table = document.createElement("table");

    // 创建标签的类型，属性名，内容，style样式,class名,
    function createEle(type, attributes, content, eleStyle, className) {
        var res = document.createElement(type);
        switch (attributes) {
            case "textContent":
                res.textContent = content;
                break;
            case "src":
                res.src = content;
                break;
            case "value":
                res.value = content;
                break;
            default:
                console.log("attribute错误！");
        }
        if (className) {
            res.className = className;
        }
        if (eleStyle) {
            Object.assign(res.style, eleStyle);
        }
        return res;
    }

    for (var i = 0; i < data.length; i++) {
        // 创建表格表头
        if (i === 0) {
            var tr = document.createElement("tr");
            for (var attr in data[0]) {
                var th = document.createElement("th");
                if (attr === "checked") {

                    var input = document.createElement("input");
                    input.type = "checkbox";
                    input.id = "checkAll";
                    Object.assign(input.style, chkStyle);
                    th.appendChild(input);
                } else {
                    th.textContent = attr;
                }
                Object.assign(th.style, tdStyle);
                // 如果是num列，将表格加宽
                if (attr === "num") {
                    Object.assign(th.style, numStyle)
                }
                tr.appendChild(th);
            }
            table.appendChild(tr);
        }

        // 添加表格内容
        var tr = document.createElement("tr");
        for (var attr in data[i]) {
            var td = document.createElement("td");
            switch (attr) {
                // 多选框
                case "checked":

                    var input = document.createElement("input");
                    input.type = "checkbox";
                    if (data[i][attr])
                        input.checked = "checked";
                    input.className = "checkItem";
                    Object.assign(input.style, chkStyle);
                    td.appendChild(input);
                    break;

                    // 图片
                case "icon":
                    td.appendChild(createEle("img", "src", data[i][attr], imgStyle));
                    break;

                    // 数量
                case "num":
                    // 创建标签的类型，属性名，内容，style样式,class名,
                    td.appendChild(createEle("button", "textContent", "-", btnStyle, "reduce"));
                    td.appendChild(createEle("input", "value", data[i][attr], txtStyle));
                    td.appendChild(createEle("button", "textContent", "+", btnStyle, "add"));
                    break;

                    // 删除按钮
                case "deleted":
                    td.appendChild(createEle("button", "textContent", "删除", btnStyle, "delItem"))
                    break;
                case "total":
                    var price = parseFloat(data[i]["price"]);
                    var num = parseFloat(data[i]["num"]);
                    td.textContent = price * num;
                    break;
                default:
                    td.textContent = data[i][attr];
            }
            Object.assign(td.style, tdStyle);
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
    document.body.appendChild(table);
}

function check() {
    var checkAll = document.getElementById("checkAll");
    var checks = document.getElementsByClassName("checkItem");
    var dels = document.getElementsByClassName("delItem");
    checks = Array.from(checks);
    dels = Array.from(dels);
    checkAll.addEventListener("click", checkAllHander);

    for (var attr in checks) {
        checks[attr].addEventListener("click", checkHander);
    }
    for (var attr in dels) {
        dels[attr].addEventListener("click", delHander);
    }

    function checkAllHander() {
        for (var attr in checks) {
            checks[attr].checked = checkAll.checked;
        }
    }

    function checkHander() {
        checkAll.checked = checks.every(function(item) {
            return item.checked;
        })
    }

    function delHander() {
        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
    }
}