javascript - 使用 Javascript 创建表并根据给定的输入动态传递数据
问题描述
我的问题是公司进行了研究，发现他们的产品在特定日期的特定商店销售量很高。
数据：
我需要这样的输出：
我试过解决它：
let sdate = prompt("Enter Starting date : yyyy-mm-dd");
let edate = prompt("Enter Ending date :(yyyy-mm-dd");
document.write("starting date is :" +sdate);
document.write("<br><br>");
document.write("Ending date is:" +edate);
document.write("<br><br>");
let Fromdate = new Date(sdate);
let Todate = new Date(edate);
//Diff. in time between two given dates
let Difference_in_time = Todate.getTime() - Fromdate.getTime() ;
//no.of days between days
let Difference_In_Days = Difference_in_time / (1000 * 3600 * 24);
document.write("No.of days between two dates are: " +Difference_In_Days);
document.write("<br><br>");
//checking if given dates are within one month
if( Difference_In_Days > 30 ){
document.write("sorry, we accept upto 30days");
} else{
document.write("Here are the results:");
document.write("<br><br>");
var dateArr = getDateIncrement(Fromdate,Todate);
for (var i = 0; i < dateArr.length; i++) {
var FinalDays = dateArr[i].getDay()/*ChangeToDay()*/;//to change given 0-6 to day's
ChangeToDay(FinalDays);
}
}
//this function is to increment the date upto given date and put into an array
function getDateIncrement(start,end){
var arr = new Array();
var dt = new Date(start);
while (dt <= end) {
arr.push(new Date(dt));
dt.setDate(dt.getDate() + 1);
}
return arr;
}
function ChangeToDay(days){
switch(days){
case 0:
document.write("Sunday -- Shop C --- Shop A --- Shop D");
document.write("<br>");
break;
case 1:
document.write("Monday -- Shop A --- Shop B --- Shop C");
document.write("<br>");
//day(monday);
break;
case 2:
document.write("Tuesday -- Shop A --- Shop B --- Shop C ");
document.write("<br>");
//day(Tuesday);
break;
case 3:
document.write("Wednesday -- Shop D --- Shop B --- Shop A");
document.write("<br>");
//day(Wednesday);
break;
case 4:
document.write("Thursday -- Shop D --- Shop B --- Shop C");
document.write("<br>");
//day(Thursday);
break;
case 5:
document.write("Friday -- Shop D --- Shop B --- Shop C");
document.write("<br>");
//day(Friday);
break;
case 6:
document.write("Saturday -- Shop E --- Shop F --- Shop D");
document.write("<br>");
//day(Saturday);
break;
}
}
let Output = [
{
day:'Monday',
product1: "Shop-A",
product2:"Shop-B",
product3:"shop-c"
},
{
day:'Tuesday',
product1: "Shop-A",
product2:"Shop-B",
product3:"shop-c"
},
{
day:'Wednesday',
product1: "Shop-D",
product2:"Shop-B",
product3:"shop-A"
},
{
day:'Thursday',
product1: "Shop-D",
product2:"Shop-B",
product3:"shop-c"
},
{
day:'Friday',
product1: "Shop-D",
product2:"Shop-B",
product3:"shop-c"
},
{
day:'Saturday',
product1: "Shop-E",
product2:"Shop-F",
product3:"shop-D"
},
{
day:'Sunday',
product1: "Shop-C",
product2:"Shop-A",
product3:"shop-D"
}
]
//function to insert table header to our program
function generateTableHead(table){
let thead = table.createTHead();
let tr=thead.insertRow();
for(let key of data){
let th=document.createElement("th");//creatin th inside tr
let text = document.createTextNode(key); //header name inserting in the tr
th.appendChild(text);
tr.appendChild(th);
}
}
//to generate table
function generateTable(table,data){
for(let element of data){
let row = table.insertRow();
for(key in element){
let cell = row.insertCell();
let text = document.createTextNode(element[key]);
cell.appendChild(text);
}
}
}
let table= document.querySelector('table');
let data =Object.keys(Output[0]);
generateTableHead(table);
generateTable(table,Output);<!DOCTYPE html>
<html>
<head>
<title>Final Result</title>
</head>
<body>
<table>
</table>
<script type="text/javascript" src="final3.js"></script>
</body>
</html>