Question

我正在尝试这样做：使用一些用户输入的数字执行简单计算，然后在单击上将计算添加到新行中的表中。表应该有三列，三列。一切都很好，但我坚持这个：如何添加用户删除某些行的选项？

所以，这将是html结构：

        <tbody id="tableBody">
            <tr id="row8"> <!-- In js this is ("row" + i) -->
                <td class="dimA"></td>
                <td class="dimB"></td>
                <td class="area"></td>
                <td><input type="checkbox" id="del8"></td> <!-- In js this is ("del" + i) -->
            </tr>
        </tbody>

因此，tr元素是由javascript创建的，每次添加后，id中的i都会递增。当用户选中复选框时，我需要能够删除整行。我知道使用addEventListener进行此操作的方法，但如何使用未知数量的项目进行此操作？

这是Javascript：

function dodajNaListu(eventInfo) {
    if (dimA & dimB !== 0) {
        var tr = document.createElement("tr");
        tr.id = "row" + i;

        var td1 = document.createElement("td");
        td1.className = "dimA";
        var A = document.createTextNode(dimA);
        td1.appendChild(A);

        var td2 = document.createElement("td");
        td2.className = "dimB";
        var B = document.createTextNode(dimB);
        td2.appendChild(B);

        var td3 = document.createElement("td");
        td3.className = "area";
        var P = document.createTextNode(rezultat);
        td3.appendChild(P);

        var td4 = document.createElement("td");
        var chck1 = document.createElement("input");
        chck1.id = "del" + i;
        chck1.setAttribute("type", "checkbox");
        td4.appendChild(chck1);

        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        document.getElementById("tableBody").appendChild(tr);
        i++;
    }
}

我是这个领域的明显新手。不，我没有使用jQuery。这实际上是我工作所需的Windows 8.1应用程序。

Answer 1

好的，我找到了答案。这是jsfiddle链接：http://jsfiddle.net/sez1bwL3/

我在调用此函数的函数dodajNaListu中创建的每个复选框中添加了一个事件监听器：

function delRow() {
    var current = window.event.srcElement;
    while ((current = current.parentElement) && current.tagName != "TR");
    current.parentElement.removeChild(current);
}

以下是我找到答案的网页链接： http://www.joegarrepy.com/tableaddrow_jscript.htm

度过美好的一天。

JS：addEventListener到动态创建的DOM对象，删除parentNode

1 个答案: