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

Question

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

我知道HTML5-canvas可用于绘制图形，但我希望有一种更简单/更简单的方法来实现这一点。

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

Answer 1

我有一个类似的问题，因为我想在不同表格中的单元格之间绘制箭头，但我认为我已经辞职的答案可能适合你：SVG。如果您从配置了列/行布局的数据结构自动生成此项，并且您可以确定所需的行高和列宽，则应该能够生成要执行的行的坐标无论你想要什么在文本上。

<svg width="300" height="100">
    <text x='100' y='0' font-size='18px' text-anchor='end'>
      <tspan x='100' dy='1em'>foo1</tspan>
      <tspan x='100' dy='1em'>foo2</tspan>
      <tspan x='100' dy='1em'>foo3</tspan>
    </text>

    <text x='200 y='0' font-size='18px'>
      <tspan x='200' dy='1em'>foo4</tspan>
      <tspan x='200' dy='1em'>foo5</tspan>
      <tspan x='200' dy='1em'>foo6</tspan>
    </text>

    <line x1='100' y1='0.8em' x2='200' y2='2.8em' style="stroke:#999999"/>
    <line x1='100' y1='1.8em' x2='200' y2='1.8em' style="stroke:#999999"/>
    <line x1='100' y1='1.8em' x2='200' y2='0.8em' style="stroke:#ff0000"/>
    <line x1='100' y1='0.8em' x2='200' y2='1.8em' style="stroke:#ff0000"/>
    <line x1='100' y1='2.8em' x2='200' y2='2.8em' style="stroke:#00ff00"/>
  </svg>

Answer 2

准备箭头图像。您将其包含在页面中的同一个容器（通常是div或span标记）中，该容器包含表本身。该容器标记为在css定义中使用absolute定位。对于阵列图像，您可以指定relative定位。现在，您可以调整位置以使阵列精确到达您想要的位置。您可能还必须为数组指定z-index。

然而，这与箭头的角度有一些问题。显然你可以使用css width和height属性拉伸和弯曲它，但是你无法转动它。至少不是我所知道的。如果你需要一个数组，你可以自由转动，例如，如果你通过脚本代码动态显示箭头，那么你可能更喜欢这些方法之一：

1. 有jquery扩展可以在画布上绘制

2. 将箭头图像创建为矢量图形（SVG格式）。该格式可以嵌入用于交互的脚本。这样，您就可以在脚本级别上转换并以其他方式与阵列交互。