在表列中动态显示对象数组 - Javascript

Question

我正在尝试创建预约时段选择网格。我已将所有约会按日期分组。我想将下面的对象数组显示为可点击的网格。我拥有我需要的一切，但我很难在列中显示它。我目前的输出：如您所见，它在正确的日期标题旁边显示了正确的约会，但是它在同一行中添加了下一个约会，依此类推。我希望每个日期及其相应的约会显示在单独的列中。顶部的日期标题，下面列出了约会。我只是使用一个 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;我希望这是足够的细节。有任何问题就问。非常感谢所有帮助。

Answer 1

您不应该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);

}));

Answer 2

看起来你的表到处都是，你创建了 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;

}

希望它有所帮助:)