在 table 列中动态显示 objects 数组 - Javascript

Question

我正在尝试创建预约时段选择网格。我已将所有约会按日期分组。我想将下面的 Objects 数组显示为可点击的网格。我拥有我需要的一切，但我很难在列中显示它。我目前的输出：

如您所见，它在正确的日期旁边显示正确的约会 header 但是它会在同一行中添加下一个约会，依此类推。我希望每个日期及其相应的约会显示在单独的列中。日期 header 在顶部，约会在下面列出。我只使用了一个 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;

        days.forEach((item) => {

            var tr = grid.appendChild(document.createElement('tr'));
            //var rowHeader = tr.appendChild(document.createElement('th'))
            var cell = tr.appendChild(document.createElement('td'));
            //rowHeader.innerHTML = item.SlotName;
            cell.innerHTML = item.AppointmentDateTime;
            cell.addEventListener('click', (function(el, item) {
                return function() {
                    callback(el, item);
                }
            })(cell, item), false);
        })

    })

    return grid;
}

我希望这已经足够详细了。有任何问题就问。非常感谢所有帮助。

更新输出：

Answer 1

您不应该为每个约会创建 tr。

你需要两个循环。一个循环创建包含所有日期的 header 行。

然后循环遍历数组索引以创建数据行。在其中，每个日期都有一个嵌套循环，填充行中的该列。由于日期会有不同数量的约会，因此您需要检查当前日期是否有那么多约会。如果是你填写单元格，否则你留空。

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

Answer 2

看起来你的 table 到处都是，你创建了 2 table 行，而实际上你只需要为每个日期（包括第 th 次和约会）使用一个行，并且您只需要在出现新日期时转到新行。我更改了一些命名以使其更精确（项目并没有说明它是什么，而且当您对不同的参数使用相同的名称时它会变得混乱）。我的 commented-out 行标有 *。

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

希望对您有所帮助:)

在 table 列中动态显示 objects 数组 - Javascript

Displaying array of objects dynamically in table columns - Javascript

javascript

html

grid-layout