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

最新推荐文章于 2019-09-06 13:08:08 发布
最新推荐文章于 2019-09-06 13:08:08 发布
阅读量709 收藏 2
点赞数 1
分类专栏： JavaScript 文章标签： JavaScript IFE 百度前端技术学院 MIS系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_34074514/article/details/82118527
版权

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（多选的表格渲染）

未做

爷爷我回来了
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Baidu-IFE:百度前端技术学院http
03-24
第三十一到第三十三天：我是精明的小卖家（一） 第三十四天到第三十六天：我是精明的小卖家（二） 第三十七天到第三十八天：我是精明的小卖家（三） 第三十九天到第四十一天：我是精明的小卖家（四） 第四十...
gallery:ife 暑期任务一
05-18
galleryife 暑期任务一
百度前端技术学院：第三十一到第三十三天：我是精明的小卖家（一）
Xiaoyi_Xie的博客
09-28 838
表单：我们先从最简单的表单开始，我们的数据维度有：月、地区、商品种类，表单选项的任务就是做这几个维度的筛选或者组合的设置。我们先只做一个，用来做示例，比如我们选择用地区，请用一个Select或者单选，让用户可以选择地区。选项应该包括华东、华南、华北三个地区。 数据处理：接下来，我们根据用户选择的地区表单，从完整数据中，把对应选择地区的数据取出来。 表格：最后，将上一步取出来数据渲染成表格，表格有...
第三十一到第三十三天：我是精明的小卖家（一）
weixin_33885253的博客
08-28 209
第三十一到第三十三天：我是精明的小卖家（一） 日期 总用时 学习目标 2018.08.27-2018.08.28 4h 见下文 学习目标 实现一个 MIS 系统 学习内容 数组遍历 数组过滤 学习笔记 数组遍历 var array1 = ["a", "b", "c"]; array1.forEach(function...
js 我是精明的小卖家（一）
苏小锅的博客
01-22 583
  给出作业链接地址 https://suyaru.github.io/Pre/Pre33/work01.html https://suyaru.github.io/Pre/Pre33/work02.html https://suyaru.github.io/Pre/Pre33/work03.html 原题地址 http://ife.baidu.com/course/detail/id...
IFE第三十四天到第三十六天：我是精明的小卖家（二）（SVG和Canvas练习）
前端攻城狮进阶之路
08-29 732
Task1（svg小练习） &lt;?xml version="1.0" standalone="no"?&gt; &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt; &lt;svg width="100%&qu
ife_work:我的百度妻子作品
05-17
这个文件夹里是参加百度前端技术训练营写的一些小项目： 2048：一个网页版的2048小游戏，也可以在移动设备上玩； airnews：一个简单的互动数据新闻页面； rockgame：一个剪刀石头布小游戏；
2018IFE:2018IFE学习
04-28
让你和页面对话课程 作业练习九：JavaScript里面的居民们课程 作业练习十：倒数开始 滴答滴 滴答滴课程 作业练习十一：给爱的人发个邮件吧课程 作业练习十二：我是精明的小卖家(MIS系统)课程 作业练习十三：开一家...
IFE:百度前端技术学院（2018）
05-10
我是精明的小卖家（一）（31-33） 数据报表，根据选择项渲染表格 我是精明的小卖家（二）（34-36） 数据报表，根据选择项渲染表格和图表 svg canvas 预览 我是精明的小卖家（三）（37-38） 数据报表，根据选择项渲染...
第三十三天
weixin_44720417的博客
04-20 195
1、事务 transaction 数据库操作的 最小单元 2、Transaction 转账 a账户转账b账户100 update account set money=money-100 where id='a' update account set money=money+100 where id='b' 3、特征 A 原子性 事务 中 的 多个操作作为整体不可分割 C 一致性 要么全成...
js我是精明的小卖家（二）
qq_45358338的博客
09-06 166
<!doctype html> <html lang="zh-cmn-Hans"> <head> <title>faf</title> <meta charset="utf-8"> <style> thead tr{ text-align: center; color: #FF7F50; backgr...
第三十一天笔记
weixin_33739541的博客
09-03 84
客户端： from socket import * 调用socket模块，因为这里要用到socket大量的接口和属性，这样写可以简化代码不用加前缀 import struct 调用struct模块 import json client = socket(AF_INET, SOCK_STREAM) client.connect(('127.0.0.1', 8081)) # 通信循环...
第三十四天
weixin_44720417的博客
04-22 169
1、视图 创建视图：create view vname as select * from s_student where class =‘95033’; 查看视图：Select * from vname 在查询视图时应注意以下问题，否则会全表查询： ①　Where order by 建索引； ②　Where 后不要出现null（可用0代替）； ③　Where 后不要出现！=或<>； ④...
2018-06-13 第三十八天
weixin_34238633的博客
06-13 86
一、wait--notify--sleep Object obj = new Object(); obj.wait(): 让当前线程在 obj上 等待。在调用obj.wait 之前，当前线程必须 对 obj上锁。调用obj.wait()之后，当前线程立即 释放 对obj 的锁，并等待进入阻塞状态。 当其他的线程 调用 obj.notify()...
第二十六天笔记
weixin_34146986的博客
08-22 59
一: 绑定方法:绑定给谁就应该由谁来调用,谁来调用就会将谁当做第一个参数传入 1. 绑定给对象的方法: 类中定义的函数默认就是绑定给对象的 2. 绑定给类的方法: 为类中定义的函数加上一个装饰器classmethod 二: 非绑定方法: 既不与类绑定,又不与对象绑定,意味着对象和类都可以来调用,无论谁来调用都是一个普通的函数,没有自动传值的效果 转载于:https://www.cnblogs....
第三十四天：js总结+重写js的日历
王恒涛
06-10 334
要求：鼠标悬浮上面就显示本月有什么大事件发生 用到的事件为：onmouseover，onmouseout(比较蠢的方法),自己第一次想到的是这个笨办法。而且,没用过display这个属性，所以做出来的是个奇葩的东西。但是，给我题的学姐是个特别好的人，就给我讲了思路，然后今天看完源码，我重写一个，日历表。 利用window.onload= function（）{}方法，这个方法的意思是，
在camera中IFE与IPE的关系
最新发布
05-19
在相机系统中，IFE代表的是图像前端处理单元（Image Front End），而IPE代表的是图像处理引擎（Image Processing Engine）。IFE和IPE是相机处理图像的两个核心模块，它们之间存在一定的关系。 IFE主要负责相机采集...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值