IFE第三十一天到第三十三天：我是精明的小卖家（一）

绝地灬酷狼 2022-05-15 08:37 166阅读 0赞

### Task1 ###

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>IFE ECMAScript</title>
    </head>
    
    <body>
        <select id="region-select">
            <option value="0">请选择</option>
            <option value="1">华东</option>
            <option value="2">华南</option>
            <option value="3">华北</option>
        </select>
    
        <select id="product-select">
            <option value="0">请选择</option>
            <option value="1">手机</option>
            <option value="2">笔记本</option>
            <option value="3">智能音箱</option>
        </select>
    
        <div id="table-wrapper">
        </div>
    
        <script type="text/javascript" src="ife31data.js"></script>
        <script>
            var region = document.getElementById("region-select");
            var table = document.getElementById("table-wrapper");
            var product = document.getElementById("product-select");
    
            region.onchange = function () {
                renderTable(getData());
            }
    
            product.onchange = function () {
                renderTable(getData());
            }
            // 根据select选项获取数据
            function getData() {
                var index = region.selectedIndex;
                var index2 = product.selectedIndex;
                var selectedRegion = region.options[index].value;
                var selectedProduct = product.options[index2].value;
                var res = new Array();
                if (selectedRegion == 1) {
                    for (var i = 0; i < sourceData.length; i++) {
                        if (sourceData[i].region == '华东') {
                            switch (selectedProduct) {
                                case "1":
                                    if (sourceData[i].product == '手机') {
                                        res[i] = sourceData[i];
                                    }
                                    break;
                                case "2":
                                    if (sourceData[i].product == '笔记本') {
                                        res[i] = sourceData[i];
                                    }
                                    break;
                                case "3":
                                    if (sourceData[i].product == '智能音箱') {
                                        res[i] = sourceData[i];
                                    }
                                    break;
                                default:
                                    res[i] = sourceData[i];
                                    break;
                            }
                        }
                    }
                } else if (selectedRegion == 2) {
                    for (var i = 0; i < sourceData.length; i++) {
                        if (sourceData[i].region == '华南') {
                            switch (selectedProduct) {
                                case "1":
                                    if (sourceData[i].product == '手机') {
                                        res[i] = sourceData[i];
                                    }
                                    break;
                                case "2":
                                    if (sourceData[i].product == '笔记本') {
                                        res[i] = sourceData[i];
                                    }
                                    break;
                                case "3":
                                    if (sourceData[i].product == '智能音箱') {
                                        res[i] = sourceData[i];
                                    }
                                    break;
                                default:
                                    res[i] = sourceData[i];
                                    break;
                            }
                        }
                    }
                } else if (selectedRegion == 3) {
                    for (var i = 0; i < sourceData.length; i++) {
                        if (sourceData[i].region == '华北') {
                            switch (selectedProduct) {
                                case "1":
                                    if (sourceData[i].product == '手机') {
                                        res[i] = sourceData[i];
                                    }
                                    break;
                                case "2":
                                    if (sourceData[i].product == '笔记本') {
                                        res[i] = sourceData[i];
                                    }
                                    break;
                                case "3":
                                    if (sourceData[i].product == '智能音箱') {
                                        res[i] = sourceData[i];
                                    }
                                    break;
                                default:
                                    res[i] = sourceData[i];
                                    break;
                            }
                        }
                    }
                } else {
                    for (var i = 0; i < sourceData.length; i++) {
                        switch (selectedProduct) {
                            case "1":
                                if (sourceData[i].product == '手机') {
                                    res[i] = sourceData[i];
                                }
                                break;
                            case "2":
                                if (sourceData[i].product == '笔记本') {
                                    res[i] = sourceData[i];
                                }
                                break;
                            case "3":
                                if (sourceData[i].product == '智能音箱') {
                                    res[i] = sourceData[i];
                                }
                                break;
                            default:
                                break;
                        }
                    }
                }
                //去除res数组中的空值
                for (var i = 0; i < res.length; i++) {
                    if (typeof res[i] == "undefined" || res[i] == null) {
                        res.splice(i, 1);
                        i--;
                    }
                }
                console.log(res)
                return res;
            }
    
            function renderTable(data) {
                // 输出表头：商品、地区、1月、2月、…… 12月
                var t_column = 14;
                var string = "<table border=\"1\"><thead><tr><th>商品</th><th>地区</th>";
                for (var i = 0; i < t_column - 2; i++) {
                    string = string.concat("<th>" + (i + 1) + "月" + "</th>");
                }
                string = string.concat("</thead>");
                string = string.concat("<tbody>");
                for (var i = 0; i < data.length; i++) {
                    string = string.concat("<tr>");
                    string = string.concat("<td>" + data[i].product + "</td>");
                    string = string.concat("<td>" + data[i].region + "</td>");
                    for (var j = 0; j < t_column - 2; j++) {
                        string = string.concat("<td>" + data[i].sale[j] + "</td>");
                    }
                    string = string.concat("</tr>");
                }
                string = string.concat("</tbody>");
                // 把生成的HTML内容赋给table-wrapper
                table.innerHTML = string;
            }
        </script>
    
    </body>
    
    </html>

let sourceData = [{
        product: "手机",
        region: "华东",
        sale: [120, 100, 140, 160, 180, 185, 190, 210, 230, 245, 255, 270]
    }, {
        product: "手机",
        region: "华北",
        sale: [80, 70, 90, 110, 130, 145, 150, 160, 170, 185, 190, 200]
    }, {
        product: "手机",
        region: "华南",
        sale: [220, 200, 240, 250, 260, 270, 280, 295, 310, 335, 355, 380]
    }, {
        product: "笔记本",
        region: "华东",
        sale: [50, 60, 80, 110, 30, 20, 70, 30, 420, 30, 20, 20]
    }, {
        product: "笔记本",
        region: "华北",
        sale: [30, 35, 50, 70, 20, 15, 30, 50, 710, 130, 20, 20]
    }, {
        product: "笔记本",
        region: "华南",
        sale: [80, 120, 130, 140, 70, 75, 120, 90, 550, 120, 110, 100]
    }, {
        product: "智能音箱",
        region: "华东",
        sale: [10, 30, 4, 5, 6, 5, 4, 5, 6, 5, 5, 25]
    }, {
        product: "智能音箱",
        region: "华北",
        sale: [15, 50, 15, 15, 12, 11, 11, 12, 12, 14, 12, 40]
    }, {
        product: "智能音箱",
        region: "华南",
        sale: [10, 40, 10, 6, 5, 6, 8, 6, 6, 6, 7, 26]
    }]

### Task2 ###

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>IFE ECMAScript</title>
    </head>
    
    <body>
        <div id="region-radio-wrapper"></div>
        <div id="product-radio-wrapper"></div>
    
        <div id="table-wrapper">
        </div>
    
        <script type="text/javascript" src="ife31data.js"></script>
        <script>
            var region = document.getElementById("region-radio-wrapper");
            var product = document.getElementById("product-radio-wrapper");
    
            function getCheckbox(checkboxName, data) {
                //生成全选checkbox的html，给一个自定义属性表示为全选checkbox，比如checkbox-type = "all"
                var all = document.createElement("input");
                all.setAttribute("type", "checkbox");
                all.setAttribute("value", "0");
                all.setAttribute("checkbox-type", "all");
                var text = document.createTextNode("全选");
                checkboxName.appendChild(all);
                checkboxName.appendChild(text);
    
                //生成各个子选项checkbox的html， 给一个自定义属性表示为子选项
                for (var i = 0; i < data.length; i++) {
                    var child = document.createElement("input");
                    child.setAttribute("value", data[i].value);
                    child.setAttribute("type", "checkbox");
                    child.setAttribute("checkbox-type", "child");
                    checkboxName.appendChild(child);
                    var text2 = document.createTextNode(data[i].text);
                    checkboxName.appendChild(child);
                    checkboxName.appendChild(text2);
                }
                //容器innerHTML = 生成好的html集合
                console.log(checkboxName)
    
                checkboxName.onclick = function (e) {
                    var e = e || window.event;
                    var target = e.target || e.srcElement;
                    if (target.getAttribute("type") == "checkbox") {
                        var len = checkboxName.childNodes.length;
                        var count = 0;
                        if (target.nodeName.toLowerCase() == 'input') {
                            var type = target.getAttribute("checkbox-type");
                            //对于全选的CheckBox的点击事件，要做的事情很简单，让所有的CheckBox全部勾选上
                            if (type == "all") {
                                for (var i = 2; i < len; i += 2) {
                                    checkboxName.childNodes[i].checked = true;
                                }
                            } else if (type == "child") {
                                for (var i = 2; i < len; i += 2) {
                                    if (checkboxName.childNodes[i].checked == true) {
                                        count++;
                                    }
                                }
                                //target和count都是按click之后的状态来进行判断
                                //在点击之前它是不是唯一一个被勾选的？如果是的话，阻止这次点击默认事件，或者立马又将其checked状态置为真
                                if (target.checked == false && count == 0) {
                                    target.checked = true;
                                }
                                //点击之后，是不是满足了全选状态，并对应修改全选CheckBox的状态
                                else if (target.checked == true && count == len / 2 - 1) {
                                    target.checked = true;
                                    checkboxName.childNodes[0].checked = true;
                                } else if (target.checked == false && count != len / 2 - 1) {
                                    target.checked = false;
                                    checkboxName.childNodes[0].checked = false;
                                } else {
                                    target.checked = false;
                                }
                            }
                        }
                    }
                }
            }
    
            // 对象或数组自己根据喜好实现均可
            getCheckbox(region, [{
                value: 1,
                text: "XXXX"
            }, {
                value: 2,
                text: "YYYY"
            }]);
    
            getCheckbox(product, [{
                value: 1,
                text: "AAAA"
            }, {
                value: 2,
                text: "BBBB"
            }]);
    
            // 生成一组CheckBox({
            //    1: "XXXX",
            //    2: "YYYY"
            // });
        </script>
    </body>
    
    </html>

### Task3（多选的表格渲染） ###

未做