时间戳

首页 > 解决方案 > 制作一条连接表格中两个单元格的线对称

javascript - 制作一条连接表格中两个单元格的线对称

问题描述

function connectThem() {    
            alert('(' + markedCells[0] +') и (' + markedCells[1] + ')');

            if (markedCells.length == 2) {
                y_distance = markedCells[0][0] - markedCells[1][0];
                y_distance = Math.abs(y_distance) + 1;  // vertical distance between dots

                x_distance = markedCells[0][1] - markedCells[1][1];
                x_distance = Math.abs(x_distance) + 1;  // horizontal distance between dots


                if (x_distance > y_distance) {  // if horizontal distance is bigger than vertical distance
                    markedCells.sort(function(a,b){return a[1] - b[1];});

                    totalRows = y_distance;

                    for (var row = 0 ; row < y_distance; row++) {
                        thisRowLength = Math.floor(x_distance / totalRows);

                        for (var c = 0; c < thisRowLength; c++) {
                            document.getElementById('cell-' + markedCells[0][0] + '-' + markedCells[0][1]).style.backgroundColor = "red";

                            markedCells[0][1] = parseInt(markedCells[0][1]) + 1;
                        }

                        if (markedCells[0][0] < markedCells[1][0]) {    // if first marked dot is higher
                            markedCells[0][0] = parseInt(markedCells[0][0]) + 1;
                        }
                        else {                                          // if second one is higher 
                            markedCells[0][0] = parseInt(markedCells[0][0]) - 1;
                        }

                        totalRows -= 1; // vertical remaining
                        x_distance -= thisRowLength;    // horizontal remaining
                    }  
                }

                else {
                    markedCells.sort(function(a,b){return a[0] - b[0];});

                    totalCols = x_distance;

                    for (var col = 0; col < x_distance; col++) {
                        thisColLength = Math.floor(y_distance/totalCols);

                        for (var r = 0; r < thisColLength; r++) {

                            document.getElementById('cell-' + markedCells[0][0] + '-' + markedCells[0][1]).style.backgroundColor = "red";

                            markedCells[0][0] = parseInt(markedCells[0][0]) + 1;
                        }


                        if (markedCells[0][1] < markedCells[1][1]) {    // if first marked dot is higher
                            markedCells[0][1] = parseInt(markedCells[0][1]) + 1;
                        }
                        else {  // if second one is higher
                            markedCells[0][1] = parseInt(markedCells[0][1]) - 1;
                        }


                        totalCols -= 1;
                        y_distance -= thisColLength;
                    }
                }
            }

            else {  // if more or less than 2 dots to connect
                alert("Can't connect " + markedCells.length + " dots");
            }  
        }

这是我的丑陋代码，它执行以下操作：我在表格中标记了 2 个单元格，脚本将这 2 个单元格与一条线连接起来 - 逐个单元格地为路径着色。即使这是一个蹩脚的解决方案，它仍然可以正常工作。但！线是不对称的。

在此处输入图像描述

如您所见，上部有 2 个细胞系，而底部有 3 个细胞系。它看起来不对称。我希望它在连接线的中间或连接线的末端附近添加 3 个单元格线。我怎么做？或者，连接细胞的更好解决方案是什么？

标签： javascripthtml

解决方案

因为您还要求提供其他解决方案，这是一个（基于我的评论，我想知道它是否真的可以工作（尽管仅使用 CSS 无法做到））但是为了给您一个想法，这里有一个使用 javascript 的示例和 CSS ...

var rows = document.querySelectorAll('table tr');
var styleElement = document.createElement('style');
var styles = '';
rows.forEach((element, index) => {
var rowNr = (index +1);
var cellNr = (index+index +1);
styles = styles + 'tr:nth-child('+rowNr+') td:nth-child('+cellNr+'),tr:nth-child('+rowNr+') td:nth-child('+(cellNr+1)+') { background: red;}'
});
styleElement.innerHTML = styles;
document.body.appendChild(styleElement);
table {
  border-collapse: collapse;
}

td {
  border: solid 1px gray;
  width: 20px;
  height: 20px;
}
/* unfortunately this didn't work but shows the logic needed */
/*
tr:nth-child(1) td:nth-child(1),
tr:nth-child(1) td:nth-child(2) {
  background: red;
}

tr:nth-child(2) td:nth-child(3),
tr:nth-child(2) td:nth-child(4) {
  background: blue;
}
*/
<table>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>

如果你想玩它这里是一个小提琴

推荐阅读