如何在不使用表格标记的情况下安排时间轴？

Question

我正在尝试建立一个时间表来显示餐厅的预订。我试图通过使用表格来实现此目的，并通过更改其背景来改变列数，但是在另一个post人中，我建议这样做是一种不好的做法。

那么问题是，用html构建时间轴是最佳实践吗？

这是表格标记：

用户将输入预订开始时间和结束时间的数据和时间，他还将能够添加预订该表格的人的姓名，该表格将显示在该单元格中。

我将表格除以96列，因此每4列等于15分钟。 然后，数据将以XML格式保存并发送到餐厅的销售点，因此预订也将在POS上进行同步

该表的构建如下

       <table class="table table-hover" border="1" style="border:none; width:100%">
                                    <tbody>
                                        <th>33</th><td></td> // <td></td> x 96
                                    </tbody>
                                </table>

这里是jsfiddle个表的完整代码，数据是从服务器加载的，因此数据是动态的

Answer 1

我认为我会采用数据驱动的方法。将您的数据转换为JavaScript数组并对其进行迭代，从而构建每一行。将保留类应用于列出为保留的单元格。

  let timelineRows = [{
      name: 'Tavalo 1',
      reservedBlocks: [14, 15, 16, 17]
    },
    {
      name: 'Tavalo 2',
      reservedBlocks: [4, 5]
    },
    {
      name: 'Tavalo 3',
      reservedBlocks: [8, 9, 10]
    }
  ];

  $.each(timelineRows, function(i, row) {
    let rowMarkup = $('<div class="timeline-row"><div>' + row.name + '</div></div>');

    for (j = 0; j < 96; j++) {
      let isReservedBlock = $.inArray(j, row.reservedBlocks) > -1;
      let blockClass = isReservedBlock ? ' reserved' : '';
      rowMarkup.append('<div class="' + blockClass + '"></div>');
    }

    $('#timeline').append(rowMarkup);
  });

Demo