Question

在我的应用程序中，我需要在输入控件（TextBoxes）中输入所有输入值。

然后，将这些值作为一行插入到表中，这里我检查了多余的EmpNo值。删除按钮将在插入表格行时与ID一起动态生成。

现在我需要在点击删除按钮时删除该行

如何选择所选删除按钮的行？并从表中删除它？

enter image description here

$("#btnInsert").click(function () {
            var eNo = $("#txtEmpNo").val();
            var eName = $("#txtEmpName").val();
            var sal = $("#txtSalary").val();
            var deptNo = $("#txtDeptNo").val();
            var rowCnt = $("#tblBody tr").size();

            if (eNo == "" && eName == "" && sal == "" && deptNo == "") {
                alert("Enter values");
            }
            else {
                if (rowCnt == 0) {
                    $("<tr><td id='Items" + rowCnt + "'>" + eNo + "</td><td>" + eName + "</td><td>" + sal + "</td><td>" + deptNo +" <input type='button' value='Delete' id='btnDelete"+rowCnt+"'/></td></tr>").appendTo("#tblBody");
                    $("input[id^=txt]").val(""); 
                    $("input[id^=btnDelete]").bind("click", function () {
                        alert("delete button is clicked");
                    });

                }
                else {
                    var dupCount = 0;
                    for (var i = 0; i < rowCnt; i++) {
                        var num = $("#Items" + i).html().toString();
                        if (eNo == num) {
                            dupCount++;
                        }
                    }
                    if (dupCount == 0) {
                        $("<tr><td id='Items" + rowCnt + "'>" + eNo + "</td><td>" + eName + "</td><td>" + sal + "</td><td>" + deptNo + " <input type='button' value='Delete' id='btnDelete" + rowCnt + "'/></td></tr>").appendTo("#tblBody");
                        $("input[id^=txt]").val("");
                        $("input[id^=btnDelete]").bind("click", function () {
                            alert("delete button is clicked");
                        });
                    }
                    else {
                        alert("Your entered EmpNo is already exists in the table !");
                    }
                }
            }
        })

Answer 1

这是您更新的FIDDLE。

以下是重要的一句话：

JS

$(this).parent().parent().remove();

我刚使用你的点击事件来触发.remove（）。

Answer 2

以一致的方式生成行和按钮的ID（如DelButton1，Row1; DelButton2，Row2等）。然后在删除按钮事件处理程序中，获取调用者的id，使用它来计算伴随行的id，并删除该行。

另请注意，要删除元素，您需要在该元素的父元素上使用removeChild（）。

或者，如果您有删除按钮对象，则可以使用：

<deleteButton>.parentNode.parentNode

获取tr元素（第一个parentNode获取按钮所在的td元素，第二个获取tr）。请注意，如果在tr之前按钮周围有任何其他标签，则表示您需要多次调用parentNode。

Answer 3

简单的解决方案是读取输入并将html附加到表中：

var rowid = 0;
function addRow(empno, name, sal, deptno){
   rowid = "tableRow" + tableid;
   var row = "<tr id=rowid><td>"+ empno+"</td>"+ "<td>"+ name+"</td>"+ "<td>"+
                           sal+"</td>"+ "<td>"+deptno+"</td></tr>";
           $("tbody").append(row);
           id+=1;
     }
function removeRow(rowid){...}

此代码添加到表中。所以在输入＆＃34;点击＆＃34;你必须正确读入数值。

Answer 4

请试试这个

 //=======remove dyanamic file=====//
    $(document).on("click", "#btnDelete", function () {
        $(this).closest("#YourtrID").remove();
    });

它在工作

如何读取动态生成的HTML表行td值？

4 个答案: