原生javascript实现两个select联动和日期设置

最新推荐文章于 2023-10-11 09:23:19 发布

码农CV

最新推荐文章于 2023-10-11 09:23:19 发布

阅读量388

点赞数

本文链接：https://blog.csdn.net/qq_36482202/article/details/110009969

版权

<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 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);
}

</script>
</head>

</html>

码农CV

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生javascript实现两个select联动和日期设置

<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"]}...
复制链接

扫一扫