javascript - 在 JavaScript 中更新表格

Question

我有一个二维数组 cells，我用它来存储一些 cellData 值。我在 JavaScript 中有一个 displayTable 函数，我调用它来将这个数组显示为一个表。我遇到的问题是，在我点击一个单元格后，它的 cellType 应该更改为 "start" 然后，当立即重绘表格时，它的颜色应该更改为在其样式中指定的颜色，但这并没有发生。单元格的颜色保持不变。

function CellData(cellType) {
this.cellType = cellType;
this.crowFlyDistance = Number.Infinity;
this.backtrack = null;
}

function displayTable() {
        var table = document.createElement('table');
        var tableBody = document.createElement('tbody');
        for(var row = 0; row < rowAndColumnSize; row++) {
        var rowToAppend = document.createElement('tr');
        for(var column = 0; column < rowAndColumnSize; column++) {
          var cellToAppend = document.createElement('td');
          cellToAppend.className = "baseCell";
          cellToAppend.className += " " + cells[row][column].cellType;
          cellToAppend.addEventListener("click", clicked);
          rowToAppend.appendChild(cellToAppend);
        }
      tableBody.appendChild(rowToAppend);
    }
    table.appendChild(tableBody);
    document.getElementById("space").appendChild(table);
    }

当页面首次加载时，我已将点击功能分配给 selectStart。用户在表格上选择开始位置后，单击的函数应使用 clearTable 函数清除表格，然后调用 displayTable 以更新表格的值。

function selectStart() {
    var row = this.parentNode.rowIndex;
    var column = this.cellIndex;
    if(cells[row][column].cellType == "empty") {
      cells[row][column].cellType = "start";
      clearTable();
      displayTable();
      clicked = selectEnd();
      alert("Select an end location.");
    }
    else alert("Select a cell that is empty.");
  }

function clearTable() {
    var tableDiv = document.getElementById("space");
    while(div.firstChild){
      div.removeChild(div.firstChild);
    }
  }

我为每个单元格的类定义了不同的样式，所以被点击的单元格在被点击后应该改变颜色。问题是单元格的颜色保持不变，如果我将每个单元格的文本设置为包含该单元格的 cellType，它会保持为空。但是，如果我连续两次单击同一个单元格，则会出现“选择一个空单元格”的警报。弹出，意味着该单元格的 cells.cellType 值已更新。我更新表格的方式有问题吗？

JSFiddle:http://jsfiddle.net/r4zxb11o/

Answer 1

您发布的 JSFiddle 有错误，每次调用 clearTable 方法时它都会崩溃。要删除 space 内的所有元素，您可以使用 space.innerHTML = ''

function clearTable() {
    space.innerHTML = '';
}