如何读取动态生成的HTML表行的td值? [英] How to read dynamically generated HTML table row's td value?

问题描述

在我的应用程序中，我需要在输入控件(TextBoxes)中输入所有输入值.

In my application I need to enter all the input values in input controls (TextBoxes).

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

Then, insert these values in a table as a row, Here I was checking the redundant EmpNo values. The delete button will be generated dynamically along with the ID while inserting the row of the table.

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

Now I need to delete the row when delete button is clicked

如何选择所选删除按钮的行?并将其从表格中删除?

How to select the row of a selected delete button ? and remove it from the table ?

JSFiddle上的演示

$("#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 !");
                    }
                }
            }
        })

推荐答案

这是您更新的 FIDDLE .

这是重要的一行:

JS

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

我只是使用您的click事件来触发.remove().

I just used your click event to trigger the .remove().

这篇关于如何读取动态生成的HTML表行的td值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！