(function() {
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var sel1 = document.querySelector('#sel1');
var sel2 = document.querySelector('#sel2');
var year = 2016;
var table = document.querySelector('table');
function fillMonths(month, select) {
var element = document.createElement('option');
element.textContent = month;
select.appendChild(element);
}
months.forEach(function(month) {
fillMonths(month, sel1);
});
months.forEach(function(month) {
fillMonths(month, sel2);
});
function drawDataTable(selected) {
var rest = months.slice(months.indexOf(selected[0]), months.indexOf(selected[1]) + 1);
var nodes = table.rows[0];
while (nodes.children.length > 1) {
var cell = nodes.children[1];
nodes.removeChild(cell);
}
rest.forEach(function(month) {
var header = document.createElement('th');
header.textContent = month + ' ' + year;
table.rows[0].appendChild(header);
});
}
var monthSelected = ['January', 'January'];
drawDataTable(monthSelected);
sel1.addEventListener('change', function(event) {
monthSelected[0] = event.target.value;
drawDataTable(monthSelected);
});
sel2.addEventListener('change', function(event) {
monthSelected[1] = event.target.value;
drawDataTable(monthSelected);
});
})();
body {
font-family: "Open Sans", sans-serif;
}
table {
border-collapse: collapse;
}
th {
border: 2px solid black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Made with Thimble</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Choose date</h1>
Month
<select id="sel1"></select>
to
<select id="sel2"></select>
<table>
<tr>
<th>Buyer</th>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>
如果你指的是數據表:頁眉和數據是緊密聯繫在一起,你不能只是在飛行中添加新列。我建議你組織你的數據集來包含所有的月份,然後根據你的日期選擇器或者你正在使用的任何東西,顯示**/**隱藏**相關的列。 – davidkonrad