- 表单:我们先从最简单的表单开始,我们的数据维度有:月、地区、商品种类,表单选项的任务就是做这几个维度的筛选或者组合的设置。我们先只做一个,用来做示例,比如我们选择用地区,请用一个Select或者单选,让用户可以选择地区。选项应该包括华东、华南、华北三个地区。
- 数据处理:接下来,我们根据用户选择的地区表单,从完整数据中,把对应选择地区的数据取出来。
- 表格:最后,将上一步取出来数据渲染成表格,表格有一个表头,用于显示数据标题:商品、地区、1月、2月……12月,然后共有14列:商品、地区、以及12个月的销售情况
- 我们现在加入第二个表单,商品种类,依然是select或者radio,自选。
- 两个表单项都存在,做并集的选择,比如选了华北,和手机,表示要看华北地区手机的销售情况
- 两个表单项的选择互相不干扰,即改变其中一个时候,不会导致另外一个的选项的变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="数据用例.js"></script>
<style>
table {
margin-top: 15px;
border-collapse: collapse;
border: 1px solid #aaa;
width: 100%;
}
table th {
vertical-align: baseline;
padding: 5px 15px 5px 6px;
background-color: #3F3F3F;
border: 1px solid #3F3F3F;
text-align: center;
color: #fff;
}
table td {
vertical-align: center;
padding: 6px 15px 6px 6px;
border: 1px solid #aaa;
text-align: center;
}
table tr:nth-child(odd) {
background-color: #F5F5F5;
}
table tr:nth-child(even) {
background-color: #fff;
}
</style>
</head>
<body>
<select id="product-select">
<option hidden="true">商品</option>
<option>手机</option>
<option>笔记本</option>
<option>智能音箱</option>
</select>
<select id="region-select">
<option hidden="true">地区</option>
<option>华东</option>
<option>华北</option>
<option>华南</option>
</select>
<hr>
<div id="table-wrapper">
</div>
<script>
var productSelect = document.getElementById("product-select");
var regionSelect = document.getElementById("region-select");
var tableDiv = document.getElementById("table-wrapper");
regionSelect.onchange = function () {
getTable();
}
productSelect.onchange = function () {
getTable();
}
function getData() {
var regionText = regionSelect.value;
var productText = productSelect.value;
var arr = new Array();
for (var i = 0; i < sourceData.length; i++) {
if (sourceData[i].region == regionText && sourceData[i].product == productText ) {
arr.push(sourceData[i]);
}
}
console.log(arr);
return arr;
}
function getTable() {
tableDiv.removeChild(tableDiv.childNodes[0]);
var table = document.createElement("table");
var headTable = ["商品", "地区", "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
var header = table.createTHead();
var tr0=header.insertRow(0);
for (var i = 0; i < headTable.length; i++) {
var th = tr0.insertCell(tr0.cells.length);
th.innerHTML = headTable[i];
}
var arr=getData();
for(var i=0;i<arr.length;i++){
var tr=table.insertRow(table.rows.length);
var td=tr.insertCell(0);
td.innerHTML=arr[i].product;
var td=tr.insertCell(1);
td.innerHTML=arr[i].region;
for(var j=0;j<12;j++){
var td=tr.insertCell(j+2);
td.innerHTML=arr[i].sale[j];
}
}
document.querySelector("#table-wrapper").appendChild(table);
}
</script>
</body>
</html>
checkbox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="数据用例.js"></script>
<style>
table {
margin-top: 15px;
border-collapse: collapse;
border: 1px solid #aaa;
width: 50%;
}
table td {
vertical-align: center;
padding: 6px 15px 6px 6px;
border: 1px solid #aaa;
text-align: center;
}
table tr:nth-child(odd) {
background-color: #F5F5F5;
}
table tr:nth-child(even) {
background-color: #fff;
}
</style>
</head>
<body>
<div id="region-radio-wrapper"></div>
<div id="product-radio-wrapper"></div>
<div id="table-wrapper"></div>
<script>
var regionGroup = document.getElementById("region-radio-wrapper");
var productGroup = document.getElementById("product-radio-wrapper");
var tableDiv = document.getElementById("table-wrapper");
function checkBoxGroup(checkBoxName, data) {
var allSelect = document.createElement("input");
allSelect.setAttribute("type", "checkbox");
allSelect.setAttribute("checkbox-type", "all");
allSelect.setAttribute("value", "0");
var text = document.createTextNode("全选");
checkBoxName.appendChild(allSelect);
checkBoxName.appendChild(text);
for (var i = 0; i < data.length; i++) {
var select = document.createElement("input");
select.setAttribute("type", "checkbox");
select.setAttribute("value", i + 1);
select.setAttribute("checkbox-type", "single")
var text = document.createTextNode(data[i].text);
checkBoxName.appendChild(select);
checkBoxName.appendChild(text);
}
checkBoxName.onclick = function (event) {
var event = event || window.event;
var target = event.target || event.srcElement;
if (target.getAttribute("type") == "checkbox") {
var len = checkBoxName.childNodes.length;
var count = 0;
var checkBoxType = target.getAttribute("checkbox-type");
if (checkBoxType == "all") {
if (target.checked == true) {
for (var i = 2; i < len; i++) {
if (checkBoxName.childNodes[i].tagName == "INPUT") {
checkBoxName.childNodes[i].checked = true;
console.log(checkBoxName.childNodes[i]);
}
}
}
else {
target.checked = true;
}
}
if (checkBoxType == "single") {
for (var i = 2; i < len; i++) {
if (checkBoxName.childNodes[i].checked == true) {
count++;
console.log(checkBoxName.childNodes[i]);
}
}
console.log(count);
if (count == len / 2 - 1 && allSelect.checked == false) {
allSelect.checked = true;
}
else if (count < len / 2 - 1 && count > 0) {
allSelect.checked = false;
}
else if (count == 0) {
target.checked = true;
}
}
}
createTable();
}
}
function getData(checkBoxName) {
var checkBoxNamelen = checkBoxName.childNodes.length;
var checkBoxNameArr = new Array();
for (var i = 2; i < checkBoxNamelen; i++) {
if (checkBoxName.childNodes[i].checked == true) {
checkBoxNameArr.push(checkBoxName.childNodes[i + 1].textContent);
}
}
return checkBoxNameArr;
}
function getTableData() {
selectRegion = getData(regionGroup);
selectProduct = getData(productGroup);
var arr = new Array();
console.log(selectRegion);
for (var z = 0; z < selectProduct.length; z++) {
for (var i = 0; i < selectRegion.length; i++) {
for (var j = 0; j < sourceData.length; j++) {
if (sourceData[j].region == selectRegion[i] && sourceData[j].product == selectProduct[z]) {
arr.push(sourceData[j]);
}
}
}
}
console.log(arr);
return arr;
}
function createTable() {
if (tableDiv.childNodes[0]) {
tableDiv.removeChild(tableDiv.childNodes[0]);
}
arr = getTableData();
table = document.createElement("table");
regionLen = selectRegion.length;
productLen = selectProduct.length;
if (productLen == 1 && regionLen >= 1) {
diffTable1();
}
else if (regionLen == 1 && productLen > 1) {
diffTable2();
}
else if (regionLen > 1 && productLen > 1) {
diffTable3();
}
document.querySelector("#table-wrapper").appendChild(table);
}
function diffTable1() {
var headTable = ["商品", "地区", "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
var header = table.createTHead();
var tr0 = header.insertRow(0);
for (var i = 0; i < headTable.length; i++) {
var th = tr0.insertCell(tr0.cells.length);
th.innerHTML = headTable[i];
}
for (var i = 0; i < arr.length; i++) {
if (i == 0) {
var tr = table.insertRow(table.rows.length);
var td = tr.insertCell(0);
td.innerHTML = arr[i].product;
td.rowSpan = arr.length;
var td = tr.insertCell(1);
td.innerHTML = arr[i].region;
for (var j = 0; j < 12; j++) {
var td = tr.insertCell(j + 2);
td.innerHTML = arr[i].sale[j];
}
} else {
var tr = table.insertRow(table.rows.length);
var td = tr.insertCell(0);
td.innerHTML = arr[i].region;
for (var j = 0; j < 12; j++) {
var td = tr.insertCell(j + 1);
td.innerHTML = arr[i].sale[j];
}
}
}
}
function diffTable2() {
var headTable = ["地区", "商品", "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
var header = table.createTHead();
var tr0 = header.insertRow(0);
for (var i = 0; i < headTable.length; i++) {
var th = tr0.insertCell(tr0.cells.length);
th.innerHTML = headTable[i];
}
for (var i = 0; i < arr.length; i++) {
if (i == 0) {
var tr = table.insertRow(table.rows.length);
var td = tr.insertCell(0);
td.innerHTML = arr[i].region;
td.rowSpan = arr.length;
var td = tr.insertCell(1);
td.innerHTML = arr[i].product;
for (var j = 0; j < 12; j++) {
var td = tr.insertCell(j + 2);
td.innerHTML = arr[i].sale[j];
}
} else {
var tr = table.insertRow(table.rows.length);
var td = tr.insertCell(0);
td.innerHTML = arr[i].product;
for (var j = 0; j < 12; j++) {
var td = tr.insertCell(j + 1);
td.innerHTML = arr[i].sale[j];
}
}
}
}
function diffTable3() {
var headTable = ["商品", "地区", "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
var header = table.createTHead();
var tr0 = header.insertRow(0);
for (var i = 0; i < headTable.length; i++) {
var th = tr0.insertCell(tr0.cells.length);
th.innerHTML = headTable[i];
}
for (var i = 0; i < productLen; i++) {
for (var z = 0; z < regionLen; z++) {
if (z == 0) {
var tr = table.insertRow(table.rows.length);
var td = tr.insertCell(0);
td.innerHTML = arr[z + i * regionLen].product;
td.rowSpan = regionLen;
var td = tr.insertCell(1);
td.innerHTML = arr[z + i * regionLen].region;
for (var j = 0; j < 12; j++) {
var td = tr.insertCell(j + 2);
td.innerHTML = arr[z + i * regionLen].sale[j];
}
}
else {
var tr = table.insertRow(table.rows.length);
var td = tr.insertCell(0);
td.innerHTML = arr[z + i * regionLen].region;
for (var j = 0; j < 12; j++) {
var td = tr.insertCell(j + 1);
td.innerHTML = arr[z + i * regionLen].sale[j];
}
}
}
}
}
checkBoxGroup(regionGroup, [{
value: 1,
text: "华北"
}, {
value: 2,
text: "华南"
}, {
value: 3,
text: "华东"
}
]);
checkBoxGroup(productGroup, [{
value: 1,
text: "手机"
}, {
value: 2,
text: "笔记本"
}, {
value: 3,
text: "智能音箱"
}
]);
</script>
</body>
</html>
- 换成checkbox之后的代码写的有点长,没有分开多个文件。
- 当地区和商品都多选时,需要arr里面的产品、地区按一定的顺序排列。
- 有时间再把逻辑进行优化。