標準の静的な HTML テーブルが与えられた場合、2 つの HTML テーブル エントリの間に矢印を描画するプログラムで最も簡単な方法は何ですか? 例については、上の写真を参照してください。
HTML5キャンバスを使用してグラフィックを描画できることは知っていますが、これを実現するためのよりシンプルで簡単な方法を望んでいます.
更新: 私は HTML テーブルに縛られていません。必要に応じて、Web ブラウザで読み取れる任意の形式でテーブルを生成できます。
矢印の画像を用意します。テーブル自体を保持する同じコンテナー (通常はdiv
またはタグ) のページに含めます。そのコンテナは、css 定義内でポジショニングspan
を使用しているとマークされています。absolute
配列イメージでは、relative
配置を指定します。これで、位置を調整して、配列フローを目的の場所に正確に配置できます。配列の z-index も指定する必要がある場合があります。
ただし、これには矢印の角度に問題があります。明らかに、css の幅と高さの属性を使用して伸ばしたり曲げたりすることはできますが、回転させることはできません。少なくとも私の知る限りではありません。自由に回転できる配列が必要な場合、たとえば、スクリプト コードによって矢印を動的に視覚化する場合は、次のいずれかの方法を使用することをお勧めします。
キャンバスへの描画を提供するjquery拡張機能があります
矢印イメージをベクター グラフィック (SVG 形式) として作成します。この形式には、インタラクティブなスクリプトを埋め込むことができます。そうすれば、スクリプト レベルで配列を回転させたり、操作したりできます。