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(多选的表格渲染)
未做