プログラムで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> 

この1つは完璧に動作します。さらに、テーブルprogrammaticallyにtable rowsを追加したいと思います。また、このコードがうまく機能している

 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つのエントリで機能しますが、追加されたエントリの1つにRemove buttonを押すと、プログラムによって追加された行がすべて削除されます。

Answer 1

各trを一意に識別するために何かを追加する必要があります。各trにカスタム属性を設定し、一意のIDなどを設定し、一意の値をdelete関数に渡すことができます。 （インスペクタを使用し、あなたがプログラムで、あなたの2つの行を追加した後

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

​​