<html>
<head>
<script type="text/javascript">
var regions = {}
var tableHeader = ["name", "sex"]
var tableData = [["lize", "male"], ["lixin", "female"]]
function load()
{
regions = {"HONEKONG": ["a1", "a2"], "JAPAN": ["b1", "b2"]}
var regionsKey = Object.keys(regions)
var regoinSelect = generateSelect("region", regionsKey)
regoinSelect.onchange = changeRegion
var tableSelect = generateSelect("table", regions[regionsKey[0]])
var dateInput = generateDateInput();
var queryButton = generateQueryButton();
var downloadButton = generateDownloadButton();
var table = generateTable();
document.body.appendChild(regoinSelect);
document.body.appendChild(tableSelect);
document.body.appendChild(dateInput);
document.body.appendChild(queryButton);
document.body.appendChild(downloadButton);
document.body.appendChild(table);
}
function changeRegion(){
var regionSelect = document.getElementById("region");
var tableSelect = document.getElementById("table");
tableSelect.length = 0;
generateOption(tableSelect, regions[regionSelect.value])
}
function clickQuery(){
var table = document.getElementById("table").value;
var date = document.getElementById("date").value;
date = date.replace(/-/g, '');
console.log(table + date)
}
function clickDownload(){
let csvStr = "";
for(let i=0; i<tableHeader.length; i++){
csvStr = csvStr + tableHeader[i] + "\t" + ",";
}
csvStr = csvStr + "\n";
for(let i=0; i<tableData.length; i++){
for(let j=0; j<tableData[i].length; j++){
csvStr = csvStr + tableData[i][j] + "\t" + ",";
}
csvStr = csvStr + "\n";
}
let table = document.getElementById("table").value;
let date = document.getElementById("date").value;
let fileName = table + "_" + date + ".csv";
downLoad(csvStr, fileName)
}
function downLoad(content,fileName){
var aEle = document.createElement("a");
blob = new Blob([content]);
aEle.download = fileName;
aEle.href = URL.createObjectUrl(blob);
//aEle.href = content;
aEle.click();
}
function generateSelect(id, datalist){
select = document.createElement("select")
select.id = id
return generateOption(select, datalist)
}
function generateOption(select, datalist){
for (var i=0; i<datalist.length; i++){
option = document.createElement("option")
option.value = datalist[i]
option.text = datalist[i]
if( i == 0){
option.selected = true
}
select.appendChild(option)
}
return select
}
function generateDateInput(){
var dateInput = document.createElement("input");
dateInput.type = "date";
dateInput.id = "date";
var time = new Date();
var day = ("0" + time.getDate()).slice(-2);
var month = ("0" + (time.getMonth() + 1)).slice(-2);
var today = time.getFullYear() + "-" + (month) + "-" + (day);
dateInput.value = today;
dateInput.max = today;
return dateInput;
}
function generateQueryButton(){
queryButton = document.createElement("button");
queryButton.id = "query";
queryButton.innerText = "QUERY";
queryButton.onclick = clickQuery;
return queryButton;
}
function generateDownloadButton(){
downloadButton = document.createElement("button");
downloadButton.id = "download";
downloadButton.innerText = "DOWNLOAD";
downloadButton.onclick = clickDownload;
return downloadButton;
}
function generateTable(){
var table = document.createElement("table");
table.border = 1;
generateTableHeader(table);
generateTableBody(table);
return table;
}
function generateTableHeader(table){
console.log(tableHeader);
var tr = document.createElement("tr");
for(var i=0; i<tableHeader.length; i++){
var th = document.createElement("th");
th.innerText = tableHeader[i];
tr.appendChild(th);
}
table.appendChild(tr);
}
function generateTableBody(table){
console.log(tableData);
for(var i=0; i<tableData.length; i++){
var tr = document.createElement("tr");
for(var j=0; j<tableData[i].length; j++){
var td = document.createElement("td");
td.innerText = tableData[i][j];
tr.appendChild(td);
}
table.appendChild(tr);
}
}
</script>
</head>
<body οnlοad="load()">
</body>
</html>