在JavaScript中更新表

我有一個2d數組，cells，我用它來存儲一些cellData值。我在JavaScript中有一個displayTable函數，我調用它將這個數組顯示爲一個表格。我遇到的問題是，在單擊單元格後，cellType應該更改爲"start"，然後，當表格立即重繪時，其顏色應更改爲其樣式中指定的顏色，這種情況不會發生。單元格的顏色保持不變。在JavaScript中更新表

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/

來源

2015-02-06 ThomYorkkke

創建一個小提琴的元素。那麼回答你的問題會更容易。 – sidrocks 2015-02-06 04:38:35

@sidrocks完成。感謝您的建議。 – ThomYorkkke 2015-02-06 05:11:45

在您的小提琴中，在clearTable方法中，您的代碼將使用document.getElementById（「spaceTable」）。deleteRow（i）; 但是沒有spaceTable id的元素。我認爲這是一個錯字。 – sidrocks 2015-02-06 05:21:09

您發佈的的jsfiddle都有漏洞，每個方法clearTable被稱爲時間墜毀。要刪除所有內部space可以使用space.innerHTML = ''

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

來源

2015-02-06 05:26:50

太棒了，它現在看起來很完美。我以爲我讀了使用.innerHTML ='';不被認爲是安全的？ – ThomYorkkke 2015-02-06 06:20:14

@ThomYorkkke我查了官方文件，沒有關於安全問題的任何說明。 http://www.w3.org/TR/2008/WD-html5-20080610/dom.html – 2015-02-06 06:38:53

在JavaScript中更新表

回答

相關問題