以编程方式添加表行在javascript中不能正确工作

我有一个这样的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添加的条目之一，它会删除所有以编程方式添加的行，而不仅仅是选择的行。