javascript - 图形时间表的 HTML 表格或列表

Question

我开发了一个图形时间调度程序的原型(prototype)，但由于 JS 目前一团糟，因此需要重新编写大部分代码。我意识到这也是对我的设计进行任何重大更改的最佳时机。

它使用一个 html 表格，看起来像:

目前:

• 开始时是空的，然后通过 jquery 重写它来增长/收缩
• 相当动态(时间尺度、大小等都可以在运行时更改)
• 水平线在单元格中间，它们不是单元格边界 ( like here )。
• 红色框锚定在一个单元格中，并通过 JS 指定偏移量和大小。与蓝色框相同。
• 时间标签是单元格内的 div，使用起来不是很有趣

我需要添加更多功能:

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

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

此外，这不是一个“公共(public)”应用程序(它在登录后)，如果这有所不同的话。我的首要任务是顺利开发和易于维护/定制。尽管关于 JS 性能的想法也很有用。

编辑:

重读，我的问题有点含糊(其中的“为什么”部分)。

我感兴趣的是哪个 html 元素使它更容易:

• 定位、对齐
• 绝对定位的东西，比如红框
• 效果和事件(前面提到的类型)

或者它们非常相似？

结论编辑:

我最终将我的设计更改为类似 div 系统的网格。在我尝试添加 Firefox 兼容性之前，表格一直在工作。 Firefox 和 Chrome 在涉及复杂定位时以不同方式处理表格，并且试图使其像素完美是一场噩梦。

Answer 1

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