動態地將行添加到表並使內容可編輯

Question

我需要將行添加到表中，我已手動添加標題行，並使內容可由用戶編輯。

目前我有

var table = document.getElementById("tableData"); 

    var add = 5; 

    for (var i = 0; i < add; i++) { 

     var row = table.insertRow(0); 

     var cell1 = row.insertCell(0); 
     var cell2 = row.insertCell(1); 

     cell1.innerHTML = "New"; 
     cell2.innerHTML = "New"; 
    } 

我已經只是用來練習添加行。我已經看到，爲了使單元格可編輯，您需要將div放在「contenteditable」中。我怎樣才能將其添加到我已有的代碼中？

感謝

Answer 1

有一件事你應該注意：

<td>元素（其中一些人）不能設置爲contenteditable直接在IE中：見http://msdn.microsoft.com/en-us/library/ms537837(v=vs.85).aspx

爲了完整性，有幾種方法可以做到這一點

var table = document.getElementById("tableData"); 

    var add = 5; 

    for (var i = 0; i < add; i++) { 

     var row = table.insertRow(0); 

     var cell1 = row.insertCell(0); 

     // Method 1 (Restricted in IE) 
     cell1.innerHTML = "Method 1"; 
     cell1.setAttribute('contentEditable', 'true'); 

     // Method 2 (Restricted in IE) 
     cell1.innerHTML = "Method 2"; 
     cell1.contentEditable = true; 

     // Method 3 (All browsers) 
     cell1.innerHTML = "<div contenteditable>Method 3</div>"; 

     // Method 4 (All browsers) 
     var div1 = document.createElement('div'); 
     div1.innerHTML = "Method 4"; 
     cell1.appendChild(div1); 
     div1.contentEditable = true; 
    } 

Answer 2

的方法之一是分配的股利爲innerHTML的：

cell1.innerHTML = "<div contenteditable='true'>New</div>";