Javascript 在两个表格单元格之间绘制直线

我的家庭作业是创建一个scipt，连接表中两个标记的单元格。我的解决方案很好，但结果线有点不成比例

如您所见，最后一行的长度为4个单元格，而所有其他行的长度为3个单元格。但我希望中间的部分是最长的。像这样：

如何在不使代码过于复杂的情况下获得期望的结果。守则本身：

函数connectThem（）{
if（markedCells.length==2）{
y_距离=标记单元格[0][0]-标记单元格[1][0]；
y_距离=Math.abs（y_距离）+1；//垂直距离
x_距离=标记单元格[0][1]-标记单元格[1][1]；
x_距离=Math.abs（x_距离）+1；//水平距离
如果（x_距离>y_距离）{//如果水平距离大于垂直距离
x_距离-=0；
警报（“水平连接”）；
totalRows=y_距离；
对于（变量行=0；行

正文{
背景色：#333；
}
#工作空间{
位置：绝对位置；
宽度：900px；
高度：600px；
背景色：白烟；
最高：50%；
左：50%；
左边距：-450px；
利润上限：-300px；
}
桌子
tr，
运输署{
边框：1px纯黑；
边界塌陷：塌陷；
填充：0；
}
桌子{
宽度：900px；
高度：600px；
}
瑞德先生{
背景：红色；
颜色：白色；
}
怀特先生{
背景：白色；
颜色：黑色；
}
#btn{
位置：绝对位置；
宽度：100px；
顶部：50px；
左：50%；
左边距：-50px；
}

连接！

除了您的示例外，“连接”按钮还应该做什么？@IslamElshobokshy我将为其添加更多功能您可能需要了解Bresenham的线条绘制算法-如果您选择右侧的第一个单元格，然后选择左侧的单元格，则线条不会连接它们