首頁猿問在表列中動態顯示對象數組 -...

在表列中動態顯示對象數組 - Javascript

JavaScript

RISEBY 2023-03-24 14:18:29

我正在嘗試創建預約時段選擇網格。我已將所有約會按日期分組。我想將下面的對象數組顯示為可點擊的網格。我擁有我需要的一切，但我很難在列中顯示它。我目前的輸出：如您所見，它在正確的日期標題旁邊顯示了正確的約會，但是它在同一行中添加了下一個約會，依此類推。我希望每個日期及其相應的約會顯示在單獨的列中。頂部的日期標題，下面列出了約會。我只是使用一個 main.js 文件和一個 index.html 文件。下面的分組預約空檔數組看起來像這樣：2020-09-25: [{0:{AppointmentDateTime: "2020-09-25T13:00:00Z"}}]2020-09-28: [{0:{AppointmentDateTime: "2020-09-28T08:00:00Z"}},{1:{AppointmentDateTime: "2020-09-28T10:30:00Z"}}, {2:{AppointmentDateTime: "2020-09-28T11:00:00Z"}}]2020-09-29: [{0:{AppointmentDateTime: "2020-09-29T08:00:00Z"}},{1:{AppointmentDateTime: "2020-09-29T09:00:00Z"}}, {2:{AppointmentDateTime: "2020-09-29T11:00:00Z"}}]這是我到目前為止所擁有的：let result = await response.json();let groupedAppointments = {}result.forEach((item) => { const date = item.AppointmentDateTime.split('T')[0] if (groupedAppointments[date]) { groupedAppointments[date].push(item); } else { groupedAppointments[date] = [item]; }})var grid = clickableGrid(groupedAppointments, groupedAppointments, function(el, item) { console.log("You clicked on element:", el); selectedAppointment = item.AppointmentDateTime; console.log(selectedAppointment); el.className = 'clicked'; if (lastClicked) lastClicked.className = ''; lastClicked = el;});document.getElementById("clickable-grid").appendChild(grid);function clickableGrid(groupedAppointments, index, callback) { var i = 0; var grid = document.createElement('table'); grid.className = 'grid'; Object.keys(groupedAppointments).forEach((item) => { var days = groupedAppointments[item]; var tableRowHeader = grid.appendChild(document.createElement('tr')); var th = tableRowHeader.appendChild(document.createElement('th')); th.innerHTML = item;我希望這是足夠的細節。有任何問題就問。非常感謝所有幫助。

查看完整描述

2 回答

撒科打諢

TA貢獻1934條經驗獲得超2個贊

您不應該tr為每個約會創建一個。

你需要兩個循環。一個循環創建包含所有日期的標題行。

然后循環遍歷數組索引以創建數據行。在其中，每個日期都有一個嵌套循環，填充行中的該列。由于日期會有不同數量的約會，因此您需要檢查當前日期是否有那么多約會。如果是，則填寫單元格，否則將其留空。

function clickableGrid(groupedAppointments, callback) {

var i = 0;

var grid = document.createElement('table');

grid.className = 'grid';

var longest = 0;

var headerRow = grid.appendChild(document.createElement('tr'));

Object.entries(groupedAppointments).forEach(([item, day]) => {

if (day.length > longest) {

longest = day.length;

}

var th = headerRow.appendChild(document.createElement('th'));

th.innerHTML = item;

});

for (let i = 0; i < longest; i++) {

var tr = grid.appendChild(document.createElement('tr'));

Object.values(groupedAppointments).forEach(item => {

var cell = tr.appendChild(document.createElement('td'));

if (i < item.length) {

let time = item[i].AppointmentDateTime.split('T')[1].split('Z')[0];

cell.innerHTML = time;

cell.addEventListener('click', (function(el, item) {

return function() {

callback(el, item);

}

})(cell, item[i]), false);

}

});

}

return grid;

}

var data = {

"2020-09-25": [{

AppointmentDateTime: "2020-09-25T13:00:00Z"

}],

"2020-09-28": [{

AppointmentDateTime: "2020-09-28T08:00:00Z"

}, {

AppointmentDateTime: "2020-09-28T10:30:00Z"

}, {

AppointmentDateTime: "2020-09-28T11:00:00Z"

}],

"2020-09-29": [{

AppointmentDateTime: "2020-09-29T08:00:00Z"

}, {

AppointmentDateTime: "2020-09-29T09:00:00Z"

}, {

AppointmentDateTime: "2020-09-29T11:00:00Z"

}]

};

document.body.appendChild(clickableGrid(data, function(cell, date) {

console.log("You clicked on " + date.AppointmentDateTime);

}));

反對回復 2023-03-24

白板的微信

TA貢獻1883條經驗獲得超3個贊

看起來你的表到處都是，你創建了 2 個表行，而實際上你只需要為每個日期使用一個行（包括第 th 次和約會）并且你只需要在新日期時轉到新行被呈現。我更改了一些命名以使其更精確（項目并沒有說明它是什么，而且當您對不同的參數使用相同的名稱時它會變得混亂）。我注釋掉的行標有*.

function clickableGrid(groupedAppointments, index, callback) {

var i = 0;

var grid = document.createElement('table');

grid.className = 'grid';

Object.keys(groupedAppointments).forEach((date) => {

//*var days = groupedAppointments[key]; --> since you don't copy and just refferencing a memory slot

var tr = grid.appendChild(document.createElement('tr')); // renamed to tr because you need to have only one row, both for the header and the data

var th = tr.appendChild(document.createElement('th'));

th.innerHTML = date;

groupedAppointments[date].forEach((appointment) => {

//*var tr = grid.appendChild(document.createElement('tr')); --> cell and table hadder are in the same row

//var rowHeader = tr.appendChild(document.createElement('th'))

var cell = tr.appendChild(document.createElement('td'));

//rowHeader.innerHTML = appointment.SlotName;

cell.innerHTML = appointment.AppointmentDateTime;

cell.addEventListener('click', (function(el, appointment) {

return function() {

callback(el, appointment);

}

})(cell, appointment), false);

})

return grid;

}

希望它有所幫助:)

反對回復 2023-03-24

2 回答
0 關注
129 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在表列中動態顯示對象數組 - Javascript

在表列中動態顯示對象數組 - Javascript

2 回答

添加回答