第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

在表列中動(dòng)態(tài)顯示對(duì)象數(shù)組 - Javascript

在表列中動(dòng)態(tài)顯示對(duì)象數(shù)組 - Javascript

RISEBY 2023-03-24 14:18:29
我正在嘗試創(chuàng)建預(yù)約時(shí)段選擇網(wǎng)格。我已將所有約會(huì)按日期分組。我想將下面的對(duì)象數(shù)組顯示為可點(diǎn)擊的網(wǎng)格。我擁有我需要的一切，但我很難在列中顯示它。我目前的輸出：如您所見，它在正確的日期標(biāo)題旁邊顯示了正確的約會(huì)，但是它在同一行中添加了下一個(gè)約會(huì)，依此類推。我希望每個(gè)日期及其相應(yīng)的約會(huì)顯示在單獨(dú)的列中。頂部的日期標(biāo)題，下面列出了約會(huì)。我只是使用一個(gè) main.js 文件和一個(gè) index.html 文件。下面的分組預(yù)約空檔數(shù)組看起來像這樣：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;我希望這是足夠的細(xì)節(jié)。有任何問題就問。非常感謝所有幫助。
查看完整描述

2 回答

?
撒科打諢

TA貢獻(xiàn)1934條經(jīng)驗(yàn) 獲得超2個(gè)贊

您不應(yīng)該tr為每個(gè)約會(huì)創(chuàng)建一個(gè)。


你需要兩個(gè)循環(huán)。一個(gè)循環(huán)創(chuàng)建包含所有日期的標(biāo)題行。


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


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

}));


查看完整回答
反對(duì) 回復(fù) 2023-03-24
?
白板的微信

TA貢獻(xiàn)1883條經(jīng)驗(yàn) 獲得超3個(gè)贊

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


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;

}

希望它有所幫助:)


查看完整回答
反對(duì) 回復(fù) 2023-03-24
  • 2 回答
  • 0 關(guān)注
  • 135 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)