Javascript 用于图形化时间表的HTML表格或列表

我开发了一个图形化时间调度器的原型，但需要重新编写大部分代码，因为JS目前很混乱。我意识到这也是对我的设计进行重大修改的最佳时机

它使用一个html表，如下所示：

目前：

• 开始时为空，并通过jquery重写来增长/收缩
• 相当动态（时间刻度、大小等都可以在运行时更改）
• 水平线穿过单元格的一半，它们不是单元格边框（）
• 红框定位在单元格中，并通过JS给定偏移量和大小。蓝色盒子也一样
• 时间标签是单元格内的div，使用起来并不有趣

我需要添加更多功能：

• 一些基本/有限的缩放
• 多日标签
• 红盒上的标签
• 悬停/单击效果
• 可能是一些阻力效应

我可以弄清楚上面的所有内容，但我不确定是否最好是用表格或列表（或其他什么？）。从技术上讲，这是一个“时间表”，但它看起来更像一个图表。我在列表方面的经验非常有限，所以我正在寻找以前做过这种事情的人的建议。我不想切换到一个列表，并意识到我需要中途更改我的基本html类型

此外，这不是一个“公共”应用程序（它在登录之后），如果这有区别的话。我的重点是顺利开发和易于维护/定制。尽管关于JS性能的想法也很有用

编辑：

重读一遍，我的问题有点含糊（其中的“为什么”部分）

我感兴趣的是哪个html元素使以下方面更容易：

• 定位、校准
• 绝对定位的东西，比如红色的盒子
• 影响和事件（上述类型）

或者它们相当相似

结论编辑：

---

我最终将我的设计改为网格状的div系统。在我尝试添加Firefox兼容性之前，表一直在运行。Firefox和Chrome在复杂的定位问题上处理表格的方式不同，试图使其像素完美是一场噩梦。

为什么要列出？似乎每个“框”都应该是一个div。这将在定位和拖放功能方面给您最大的自由度。

如果列表没有特别使用表格格式（ul作为表格行，li作为表格单元格），则列表可能会构建在类似于表格的模型中。如果您要实现所有这些附加功能，我会设想使用一个列表，尽管您将div放在单元格中，int完全是有效的html。在本例中，个人首选项是“转到列表”。@如果是您，如果已经生成了表，您是否会更改为列表。我正在重新编码，但很明显，使用相同的设计会更容易一些，因为我不需要对css做太多更改。它肯定更容易与表保持一致。我不知道你对这种结构的未来计划是什么，但如果你使用一张桌子，它是刚性的。一个列表，你可以关闭它的表格一样的网格结构，这将给你更多的发挥。如果你将来不再使用这种结构，那么你已经拥有的表格网格就可以了。把div放到一个列表中不是更好吗？否则，我将用div构建自己的列和行，而不是使用适当的类型。有很多方法可以简化猫的皮肤，我正在考虑使用css网格系统来处理“类似表格”的布局。只需选择您最喜欢的CSS网格系统，或推出您自己的。或者可以使用gridpak之类的工具快速构建自定义网格布局。