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添加其中一个条目，它将删除所有以编程方式添加的行而不仅仅是所选行。< / p>

Answer 1

您需要添加一些内容来唯一标识每个tr。您可以在每个tr上设置自定义属性，设置唯一ID等，并将唯一值传递给删除功能。

此外，通过使用DOMTable属性和放大器，您可能会发现使用表格更容易。方法：

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

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

以编程方式添加表格行无法在javascript

1 个答案: