如何（以编程方式）在HTML表条目之间绘制箭头？

给定一个标准的静态HTML表，以编程方式在任意两个HTML表条目之间绘制箭头的最简单方法是什么？参见上图中的示例

我知道HTML5画布可以用来绘制图形，但我希望有一种更简单/更容易的方法来实现这一点

---

更新：我没有绑定到HTML表。如果需要，可以以web浏览器可以读取的任何格式生成表格。

准备箭头图像。您可以将它包含到页面中，并放入保存表本身的同一容器中（通常是

div

或

span

标记）。该容器被标记为在css定义中使用

绝对

定位。对于阵列图像，您可以指定相对定位。现在，您可以调整位置，以使阵列流精确到您想要的位置。您可能还必须为数组指定z索引

但是，这与箭头的角度有关。显然，您可以使用css的宽度和高度属性拉伸和弯曲它，但您无法旋转它。至少据我所知不是这样。如果您需要一个可以自由旋转的数组，例如，如果您通过脚本代码动态地可视化箭头，那么您可能更喜欢以下方法之一：

有一些jquery扩展可以在画布上绘制

将箭头图像创建为矢量图形（SVG格式）。这种格式可以嵌入用于交互的脚本。这样，您就可以在脚本级别上打开阵列并与之交互

---

我有一个类似的问题，我想在不同的表中的单元格之间画箭头，但我认为我接受的答案可能对您有用：SVG。如果您是从配置了列/行布局的数据结构自动生成的，并且您可以确定所需的行高和列宽，那么您应该能够为行生成坐标，以便在文本上执行任何操作

foo1
食物2
foo3
我不确定，但你可以试试
.svg
它比
画布
工作得更好。据我所知，您可以将一些
id
放在单元格中，然后使用JavaScript在这些单元格之间使用
svg
image绘制一个箭头。您能否详细介绍一下表单元格中标识符的用法？它们是HTML语言的一部分吗？是的，在那之后你可以使用类似于
…单元格内容…单元格内容…
。您可以使用JavaScript查找这些元素，并使
svg
图像从一个单元格的中心移动到另一个单元格的中心。然后使用JavaScript将图像定位到它的位置（使用内联img css样式）。这很复杂，但它可以工作（但不是在每个brovser:（）我想我的问题可以归结为：如何在两个html对象之间画一个箭头，对应于两个hmtl标识符？这似乎是一个非常标准的愿望。是否有一个现成的库可以这样做？恐怕我还没有听说过。但是如果你不需要动态解决方案，你可以使用来自bellow的@arkascha answer。它是这不是完整的答案，但如果您了解css，那么您应该能够做到这一点。这很简单，但前提是单元格的位置不会改变。如果它会改变，或者您希望在不同的表中使用它，那么它应该是动态的。