创建复杂的HTML表

Question

我想尽可能多地创建一个与此类似的HTML表：

主要'功能'包括：

• td根据值
着色
• 背景中的条形基于百分比
• 仅限HTML和javascript / jQuery（无论如何都要手动输入数据）

是否可以仅使用HTML / js做这样的事情，你会推荐什么来完成这项任务？

Answer 1

在每个DIV中放置两个TD，一个绝对定位以显示值，另一个放置在条形码中。在栏上使用简单的CSS3渐变背景。

Answer 2

使用js对单元格进行着色应该非常简单。

我从未在html表中看到过这些条形图，但这里有一个可能的方向： 每个td包含一个输入，供用户输入值和浮动div。当用户更新值时，使用js将浮动div的宽度设置为适当的百分比。

需要考虑的事项：

• 将输入的Z-index设置为高于浮动div
• 确保可以清楚，轻松地识别浮动div，以便js知道要更新哪个

Answer 3

是的，你可以用html / css / js实现这个目的。我建议你使用jquery（因为它仍然是js），你可以得到数字并计算百分比然后为栏添加一个类