データテーブルに列（ヘッダ）を追加する必要があります。例では私は2016年1月から2016年5月までの期間を選択した場合、私は2016年1月から2016年6月データテーブルに余分な列を追加する
Buyer|January 2016 | February 2016 | April 2016 | May 2016 | June 2016
Buyer|January 2016 | February 2016 | April 2016 | May 2016 |
のように列<th>を追加する必要がある。しかし、期間にフィルタを持っています
私はDataTablesを使用しています。
このdrawDataTableのような同様の関数を使用し、配列に月をラップし、ヘッダー行を消去し、最後にヘッダーを追加することができます。
(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>
あなたは、DataTableのを参照している場合は、次のヘッダーとデータは密接に結びついている、あなただけの場で新しい列を追加することはできません。すべての月を含めるようにデータセットを整理し、次に日付ピッカーや使用しているものに応じて関連する列を**表示**/**非表示にすることをお勧めします。 – davidkonrad