在两个表格单元格之间画一条线

Question

我的作业是创建一个连接表中两个标记单元格的幕后程序。我的解决方案工作正常，但结果行有点不相称。

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

如何获得所需的结果而不会使代码过于复杂。代码本身：

function connectThem() {
  if (markedCells.length == 2) {
    y_distance = markedCells[0][0] - markedCells[1][0];
    y_distance = Math.abs(y_distance) + 1; // vertial distance

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

    if (x_distance > y_distance) { // if horizontal distance greater than vertical distance
      x_distance -= 0;
      alert("horizontal connection");

      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;
        }

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

        totalRows -= 1; // vertical remaining
        x_distance -= thisRowLength; // horizontal remaining
      }
    } else {
      y_distance -= 0;
      alert("vertical or horizontal connection");

      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;
        }

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

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

    alert("x distance: " + x_distance + "    y distance: " + y_distance);
  } else {
    alert("Can't connect " + markedCells.length + " cells together :-(")
  }
}


var htmlElements = ""; // storing the whole table here

for (var r = 1; r < 41; r++) { // creating the table row by row
  htmlElements += '<tr>';

  for (var c = 1; c < 61; c++) { // and column by column
    htmlElements += '<td class="tCell white" id="cell-' + r.toString() + '-' + c.toString() + '"></td>';
  }

  htmlElements += '</tr>'
}


var theTable = document.getElementById("tab");
theTable.innerHTML = htmlElements;

var allTableCells = document.querySelectorAll("td"); // adding all cells to an array
var markedCells = [] // storing marked cells here

for (var i = 0; i < allTableCells.length; i++) {
  allTableCells[i].addEventListener("click", function() { // when click any cell
    let stringID = this.id.split('-');

    if (this.className == "tCell white") {
      this.className = "tCell red";
      markedCells.push([stringID[1], stringID[2]]);
    } else {
      this.className = "tCell white";

      let index = markedCells.indexOf([stringID[1], stringID[2]]);
      markedCells.splice(index, 1);
    }

    console.log(markedCells);
  });
}

body {
  background-color: #333;
}

#workspace {
  position: absolute;
  width: 900px;
  height: 600px;
  background-color: whitesmoke;
  top: 50%;
  left: 50%;
  margin-left: -450px;
  margin-top: -300px;
}

table,
tr,
td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 0;
}

table {
  width: 900px;
  height: 600px;
}

.red {
  background: red;
  color: white;
}

.white {
  background: white;
  color: black;
}

#btn {
  position: absolute;
  width: 100px;
  top: 50px;
  left: 50%;
  margin-left: -50px;
}

<div id="workspace">
  <table id="tab">

  </table>
</div>

<button id="btn" onclick="connectThem()">Connect!</button>