1

異なる行の表のセルを結ぶ対角線を探しています。1 つのセルの角を結ぶ対角線を簡単に取得できますが、セルを交差させる方法はありますか?

例えば、下の画像では、「1と3」を「1と3」のセルに結ぶ対角線が欲しいのですが、2、5、2と5も同様です。

表1

もちろん、これは 1 つのバリエーションにすぎません。セルをいくつでも接続できるようにしたいです。たぶん、このようなもの...

テーブル2

ここに何かアイデアはありますか？

4

2 に答える 2

3

このデモを試す:デモ

もう 1 つデモを追加しました。これは、セルの位置のみを取得し、それに基づいて自動的に位置を検出し、それに応じて接続します。

線の始点と終点を提供する必要がある他の回答よりも優れています。

HTML コード

<br>
<table border="1" cellpadding="5">
    <tr>
        <td>1</td>
        <td>+</td>
        <td>4</td>
        <td>1</td>
        <td>+</td>
        <td>4</td>
    </tr>
    <tr>
        <td></td>
        <td>5</td>
        <td></td>
        <td></td>
        <td>5</td>
        <td></td>

    </tr>

</table>

CSS コード

.line {
    width : 2px;
    background-color : red;
    display : block;
    position : absolute;
    -webkit-transform-origin : 0 0;
    transform-origin : 0 0;
}
.green {
    background-color : green;
}
.blue {
    background-color : blue;
}

JavaScript コード

$(function() {
    connectCells($('table'), {x : 0, y : 0}, {x : 1, y : 1}, 'red');
    connectCells($('table'), {x : 2, y : 0}, {x : 1, y : 1}, 'blue');
});

function connectCells(table, cell1, cell2, cls) {
    var td1 = table.find('tr:eq(' + cell1.y + ') td:eq(' + cell1.x + ')');
    var td2 = table.find('tr:eq(' + cell2.y + ') td:eq(' + cell2.x + ')');

    var pos1 = $(td1).position();
    var pos2 = $(td2).position();
    drawLine({
        x : pos1.left + $(td1).outerWidth()/2,
        y : pos1.top + $(td1).outerHeight() - 5
    }, {
        x : pos2.left + $(td2).outerWidth()/2,
        y : pos2.top + $(td2).outerHeight() - 5
    }, cls);
}


function drawLine(tp1, tp2, cls) {

   if(!cls) { cls = "" };

   if(tp2.x < tp1.x && tp2.y < tp1.y) {
      p1 = tp2;
      p2 = tp1;
   } else {
      p1 = tp1;
      p2 = tp2;
   }

   var ang = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI - 90;
   var lin = $('<span></span>').addClass("line " + cls).appendTo('body');

   $(lin).css({
      'top' : p1.y,
      'left' : p1.x,
      'height' : Math.sqrt((p1.x - p2.x)* (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y)),
      'transform' : 'rotate(' + ang + 'deg)'
   });
}
于 2013-08-02T19:07:05.763 に答える
0

これを試してください：デモ

JavaScript コード

$(function() {
    var p = { x : 200, y : 200 },
        p1 = { x : 300, y : 150 },
        p2 = { x : 200, y : 100 },
        p3 = { x : 100, y : 150 };

    drawLine(p, p1);
    drawLine(p, p2, "green");
    drawLine(p, p3, "blue");
});


function drawLine(tp1, tp2, cls) {

    if(!cls) { cls = "" };

    if(tp2.x < tp1.x && tp2.y < tp1.y) {
        p1 = tp2;
        p2 = tp1;
    } else {
        p1 = tp1;
        p2 = tp2;
    }

    var ang = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI - 90;
    var lin = $('<span></span>').addClass("line " + cls).appendTo('body');

    $(lin).css({
        'top' : p1.y,
        'left' : p1.x,
        'height' : Math.sqrt((p1.x - p2.x)* (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y)),
        'transform' : 'rotate(' + ang + 'deg)'
    });
}

CSSコード

.line {
    width : 2px;
    background-color : red;
    display : block;
    position : absolute;
    -webkit-transform-origin : 0 0;
    transform-origin : 0 0;
}
.green {
    background-color : green;
}
.blue {
    background-color : blue;
}

新しいスパンを作成し、CSS3 変換を使用して指定された座標に配置します。

開始位置と終了位置を動的に見つけて、それらを渡してオプションの色で線を描くことができます。

これは、必要に応じて拡張できます。

于 2013-08-02T10:20:20.890 に答える