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有bug，每次调用方法clearTable时都会崩溃。要删除space中的所有元素，您可以使用space.innerHTML = ''

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

在JavaScript中更新表

1 个答案: