[英]So I am trying to populate a HTML table using JavaScript. I can't figure out how to unshift the arrays to correctly display the data
所以我正在嘗試使用 JavaScript 填充 HTML 表。 我似乎無法讓我的表格正確填充。 這是我嘗試的第一個版本。
const schedule =
[
{
week: 1,
day: "Sunday",
unit: 1,
challenge: "Data Not Available",
goals: [
'No Goals'
]
},
{
week: 1,
day: "Monday",
unit: 1,
challenge: "Javascript Fundamentals",
goals: [
'Complete js-fundamental challenge'
]
},{
week: 1,
day: "Tuesday",
unit: 1,
challenge: "No Data Available",
goals: [
'No Goals'
]
},
{
week: 1,
day: "Wednesday",
unit: 1,
challenge: "No Data Available",
goals: [
'Complete js-fundamental challenge'
]
},
{
week: 1,
day: "Thursday",
unit: 1,
challenge: "No Data Available",
goals: [
'No Goals'
]
},
{
week: 1,
day: "Friday",
unit: 1,
challenge: "No Data Available",
goals: [
'No Goals'
]
},
{
week: 1,
day: "Saturday",
unit: 1,
challenge: "No Data Available",
goals: [
'No Goals'
]
},
{
week: 2,
day: "Sunday",
unit: 2,
challenge: "Data Structures",
goals: [
'Re-implement the following data structures: linked list, stack, queue, set, graph, hash table, tree, binary search tree',
]
},
{
week: 2,
day: "Monday",
unit: 2,
challenge: "Data Structures",
goals: [
'Re-implement the following data structures: linked list, stack, queue, set, graph, hash table, tree, binary search tree',
]
},
{
week: 2,
day: "Tuesday",
unit: 3,
challenge: "Algorithms",
goals: [
'Complete coin sum',
'Complete n-paths'
]
},
{
week: 2,
day: "Wednesday",
unit: 2,
challenge: "No Data Available",
goals: [
'No Goals',
]
},
{
week: 2,
day: "Thursday",
unit: 2,
challenge: "No Data Available",
goals: [
'No Goals',
]
},
{
week: 2,
day: "Friday",
unit: 2,
challenge: "Data Structures",
goals: [
'Re-implement the following data structures: linked list, stack, queue, set, graph, hash table, tree, binary search tree',
]
},
{
week: 2,
day: "Saturday",
unit: 2,
challenge: "Data Structures",
goals: [
'Re-implement the following data structures: linked list, stack, queue, set, graph, hash table, tree, binary search tree',
]
},
{
week: 3,
day: "Monday",
unit: 4,
challenge: "Frontend Fundamentals",
goals: [
'Complete'
]
},
{
week: 3,
day: "Sunday",
unit: 5,
challenge: "No Data",
goals: [
'No Goals'
]
},
{
week: 3,
day: "Monday",
unit: 5,
challenge: "No Data",
goals: [
'No Goals'
]
},
{
week: 3,
day: "Tuesday",
unit: 5,
challenge: "No Data",
goals: [
'No Goals'
]
},
{
week: 3,
day: "Wednesday",
unit: 5,
challenge: "AJAX",
goals: [
'Connect calendar to google API',
'Create chatroom'
]
},
{
week: 3,
day: "Thursday",
unit: 5,
challenge: "No Data",
goals: [
'No Goals'
]
},
{
week: 3,
day: "Friday",
unit: 6,
challenge: "React",
goals: [
'Create tic tac toe',
'Reactify frontend code'
]
},
];
let week = [];
let day = [];
let unit = [];
let challenge = [];
let goals = [];
const valueArray = [week, day, unit, challenge, goals];
schedule.forEach(set => {
Object.values(set).forEach((value, i) => {
valueArray[i].push(value);
});
});
let weeks = [];
week.forEach(week => {
if (!weeks.includes(week)) {
weeks.push(week)
}
})
for (let i = 1; i <= weeks.length; i++) {
document.write("week " + i)
let table = "<table>"
table += "<tr>"
for (let i = 0; i < 7; i++) {
table += "<th>" + day[i] + "<th>"
day.unshift()
}
table += "</tr>"
table += "<tr>"
for (let i = 0; i < 7; i++) {
table += "<td>" + unit[i] + "<td>"
unit.unshift()
}
table += "</tr>"
table += "<tr>"
for (let i = 0; i < 7; i++) {
table += "<td>" + challenge[i] + "<td>"
challenge.unshift()
}
table += "</tr>"
for (let i = 0; i < 7; i++) {
table += "<td>" + goals[i] + "<td>"
goals.unshift()
}
table += "</tr>"
table += "</table>"
document.write(table);
}
它用每個數組的前 7 個元素填充這樣的表。
然后我試着用這個來渲染表格：
for (let i = 1; i <= weeks.length; i++) {
document.write("week " + i)
let table = "<table>"
table += "<tr>"
for (let i = 0; i < 7; i++) {
table += "<th>" + day[i] + "<th>"
day.unshift(0)
}
table += "</tr>"
table += "<tr>"
for (let i = 0; i < 7; i++) {
table += "<td>" + unit[i] + "<td>"
unit.unshift(0)
}
table += "</tr>"
table += "<tr>"
for (let i = 0; i < 7; i++) {
table += "<td>" + challenge[i] + "<td>"
challenge.unshift(0)
}
table += "</tr>"
for (let i = 0; i < 7; i++) {
table += "<td>" + goals[i] + "<td>"
goals.unshift(0)
}
table += "</tr>"
table += "</table>"
document.write(table);
}
這給了我這個：
我不確定如何將 arrays 移到每次只取出前 7 個元素的位置。 如果可以，請你幫助我：）
正如 Terry 所建議的，您可以使用 slice 每周花 7 天時間：
const schedule = [ { week: 1, day: "Sunday", unit: 1, challenge: "Data Not Available", goals: ["No Goals"] }, { week: 1, day: "Monday", unit: 1, challenge: "Javascript Fundamentals", goals: ["Complete js-fundamental challenge"] }, { week: 1, day: "Tuesday", unit: 1, challenge: "No Data Available", goals: ["No Goals"] }, { week: 1, day: "Wednesday", unit: 1, challenge: "No Data Available", goals: ["Complete js-fundamental challenge"] }, { week: 1, day: "Thursday", unit: 1, challenge: "No Data Available", goals: ["No Goals"] }, { week: 1, day: "Friday", unit: 1, challenge: "No Data Available", goals: ["No Goals"] }, { week: 1, day: "Saturday", unit: 1, challenge: "No Data Available", goals: ["No Goals"] }, { week: 2, day: "Sunday", unit: 2, challenge: "Data Structures", goals: [ "Re-implement the following data structures: linked list, stack, queue, set, graph, hash table, tree, binary search tree" ] }, { week: 2, day: "Monday", unit: 2, challenge: "Data Structures", goals: [ "Re-implement the following data structures: linked list, stack, queue, set, graph, hash table, tree, binary search tree" ] }, { week: 2, day: "Tuesday", unit: 3, challenge: "Algorithms", goals: ["Complete coin sum", "Complete n-paths"] }, { week: 2, day: "Wednesday", unit: 2, challenge: "No Data Available", goals: ["No Goals"] }, { week: 2, day: "Thursday", unit: 2, challenge: "No Data Available", goals: ["No Goals"] }, { week: 2, day: "Friday", unit: 2, challenge: "Data Structures", goals: [ "Re-implement the following data structures: linked list, stack, queue, set, graph, hash table, tree, binary search tree" ] }, { week: 2, day: "Saturday", unit: 2, challenge: "Data Structures", goals: [ "Re-implement the following data structures: linked list, stack, queue, set, graph, hash table, tree, binary search tree" ] }, { week: 3, day: "Monday", unit: 4, challenge: "Frontend Fundamentals", goals: ["Complete"] }, { week: 3, day: "Sunday", unit: 5, challenge: "No Data", goals: ["No Goals"] }, { week: 3, day: "Monday", unit: 5, challenge: "No Data", goals: ["No Goals"] }, { week: 3, day: "Tuesday", unit: 5, challenge: "No Data", goals: ["No Goals"] }, { week: 3, day: "Wednesday", unit: 5, challenge: "AJAX", goals: ["Connect calendar to google API", "Create chatroom"] }, { week: 3, day: "Thursday", unit: 5, challenge: "No Data", goals: ["No Goals"] }, { week: 3, day: "Friday", unit: 6, challenge: "React", goals: ["Create tic tac toe", "Reactify frontend code"] } ]; let result = ''; const weeks = Math.ceil(schedule.length / 7); for (let i = 0; i < weeks; i++) { result += `<div>Week ${i + 1}</div>`; const week = schedule.slice(i * 7, i * 7 + 7); result += '<table><thead><tr>'; result += week.map(({day}) => `<th>${day}</th>`).join(''); result += '</tr></thead>'; result += '<tbody><tr>'; result += week.map(({unit}) => `<td>${unit}</td>`).join(''); result += '</tr>'; result += '<tr>'; result += week.map(({challenge}) => `<td>${challenge}</td>`).join(''); result += '</tr>'; result += '<tr>'; result += week.map(({goals}) => `<td>${goals}</td>`).join(''); result += '</tr></tbody></table>'; } document.write(result);
table, th, td { border: 1px solid black; }
試圖在 Javascript 中創建一個“trie”。 無法弄清楚為什么我的方法沒有正確添加孩子
[英]Trying to create a 'trie' in Javascript. Can't figure out why my method isn't adding the children correctly
我似乎無法弄清楚如何修復JavaScript中的兩個棉絨。 有人可以幫我理解嗎？
[英]I can't seem to figure out how to fix two lints in my javascript. Can someone help me understand?
我正在嘗試使用多個2數組來綁定svg圈子的數據，但無法弄清楚
[英]I am trying to use multiple 2 arrays for binding data for svg circles but cannot figure out how
嘗試使用CSS（活動）和JavaScript在點擊時顯示內容。 如何保持內容顯示？
[英]Trying to display content on click using css (active) and javascript. How can I keep the content displaying?
我正在嘗試制作HSV顏色選擇器，但是我不知道如何生成重疊圖像
[英]I am trying to make an HSV color picker but I can't figure out how to generate the overlay image
我正在嘗試導出一個函數以導入到另一個 javascript 頁面，但無法弄清楚如何使用導出/導入來做到這一點
[英]i am trying to export a function to import into another javascript page but can not figure out how to do it with exports/imports
我想弄清楚如何使用 javascript 將字符串中的列轉換為行
[英]I am trying to figure out how to convert columns in a string to row using javascript
我正在嘗試使用JavaScript驗證用戶輸入。 我想驗證用戶是否正確輸入了他們的課程名稱
[英]I am trying to validate user input using JavaScript. I would like to validate that the user has input their the title of their course correctly
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.