添加錶行程序不能正常運行的JavaScript

Question

我有一個form這樣的：

<form> 
    <table id="table"> 
     <tr> 
      <th>Firstname</th> 
      <th>Lastname</th> 
      <th>SVNr</th> 
     </tr> 
     <tr> 
      <td contenteditable="true">Jill</td> 
      <td contenteditable="true">Smith</td> 
      <td class="svnr" contenteditable="true">50</td> 
      <td><input type="submit" value="Remove" onclick="DeleteRow(this)"></td> 
     </tr> 
     <tr> 
      <td contenteditable="true">Eve</td> 
      <td contenteditable="true">Jackson</td> 
      <td class="svnr" contenteditable="true">94</td> 
      <td><input type="submit" value="Remove" onclick="DeleteRow(this)"></td> 
     </tr> 
    </table> 
    <input type="button" value="Save Changes"> 
</form> 

這一個完美的作品。此外，我想添加table rows到我的表programmatically。

我做這種方式：

 count = numberOfRows; 
     formular[count] = new Object(); 

     formular[count]["Firstname"] = document.getElementById("Firstname").value; 
     formular[count]["Lastname"] = document.getElementById("Lastname").value; 
     formular[count]["SVNr"] = document.getElementById("SVNr").value; 

     var table = document.getElementById("table"); 
     var TR = table.insertRow(count); 

     var TD = document.createElement("td"); 
     TD.setAttribute("contenteditable", "true"); 
     var TD2 = document.createElement("td"); 
     TD2.setAttribute("contenteditable", "true"); 
     var TD3 = document.createElement("td"); 
     TD3.setAttribute("contenteditable", "true"); 
     TD3.className = "svnr"; 
     var TD4 = document.createElement("td"); 

     var TXT = document.createTextNode(formular[count]["Firstname"]); 
     var TXT2 = document.createTextNode(formular[count]["Lastname"]); 
     var TXT3 = document.createTextNode(formular[count]["SVNr"]); 
     var Input = document.createElement("input"); 
     Input.type = "submit"; 
     Input.value = "Remove"; 
     Input.onclick = "DeleteRow(this);"; 

     TD.appendChild(TXT); 
     TR.appendChild(TD); 

     TD2.appendChild(TXT2); 
     TR.appendChild(TD2); 

     TD3.appendChild(TXT3); 
     TR.appendChild(TD3); 

     TD4.appendChild(Input); 
     TR.appendChild(TD4); 

     document.getElementById("Firstname").value = ""; 
     document.getElementById("Lastname").value = ""; 
     document.getElementById("SVNr").value = ""; 

而且這個代碼是運作良好。唯一的問題是Remove function對我以編程方式添加的錶行無法正常工作。

我刪除功能看起來像這樣：

function DeleteRow(o) { 
     var p = o.parentNode.parentNode; 
     p.parentNode.removeChild(p); 
    } 

此功能，如果我按按鈕的其中一個消除ALL編程的附加價值。這個函數適用於我沒有以編程方式添加的表單中的2個條目，但正如我所說的，如果我按Remove button添加了一個條目，它將刪除所有以編程方式添加的行，而不是僅選擇一個。

Answer 1

您需要添加一些東西來唯一標識每個tr。您可以在每個tr上設置自定義屬性，設置唯一的id等，並將唯一值傳遞給刪除功能。

此外，您可能會發現更容易與表使用DOMTable性能&方法的工作：

http://www.javascriptkit.com/domref/tableproperties.shtml

​​