html - 用对角线连接来自不同行的表格单元格

Question

我正在寻找连接来自不同行的表格单元格的对角线。我可以很容易地得到一条对角线来连接单个单元格的角，但是有没有办法穿过单元格？

例如，在下图中，我想用对角线将“1”和“3”连接到“1 & 3”单元格。与 2、5 和 2 & 5 相同。

当然，这只是一种变体。我希望能够以任何方式连接任意数量的单元。也许像这样的东西......

这里有什么想法吗？

Answer 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)'
   });
}

Answer 2

试试这个：演示

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 变换将其定位在给定的坐标处。

您可以动态找到开始和结束位置，并将它们传递给使用可选颜色绘制线条。

您可以根据需要增强此功能。