Javascript 使用jQuery HTML更新表行

我做了一张桌子。在这种情况下，我想动态地进行添加、删除和更新操作。在我的代码中，我动态地向表中添加和删除行，现在我想通过jQuery编辑表中的行。更新功能的代码是什么

在这里，我添加了我的javascript代码

function Add() {
        AddRow($("#txtName").val(), $("#txtEmail").val(), $("#txtCity").val());
        $("#txtName").val("");
        $("#txtEmail").val("");
        $("#txtCity").val("");
    };

    function AddRow(name, email, city) {

        var tBody = $("#tblCustomers > TBODY")[0]; 

        row = tBody.insertRow(-1); 
        console.log(row);

        var cell = $(row.insertCell(-1));
        cell.html(name); 

        cell = $(row.insertCell(-1));
        cell.html(email);

        cell = $(row.insertCell(-1));
        cell.html(city);

        cell = $(row.insertCell(-1));
        var btnRemove = $("<input />");
        btnRemove.attr("type", "button");
        btnRemove.attr("onclick", "Remove(this);");
        btnRemove.val("Remove");            
        var btnEdit = $("<input />");
        btnEdit.attr("type", "button");
        btnEdit.attr("onclick", "Edit(this);");
        btnEdit.val("Edit");
        cell.append(btnRemove," ",btnEdit);
    };

    function Remove(button) {

        var row = $(button).closest("TR");            
        var name = $("TD", row).eq(0).html();
        console.log(row,name,row[0].rowIndex);
        if (confirm("Do you want to delete: " + name)) {

            var table = $("#tblCustomers")[0];

            table.deleteRow(row[0].rowIndex);
        }
    };

    function Edit(button) {

         var row = $(button).closest("TR");
         console.log(row);         
         var name = $("TD", row).eq(0).html();
         var email = $("TD", row).eq(1).html();
         var city = $("TD", row).eq(2).html();

         if (confirm("Do you want to update: " + name)) {

            var table = $("#tblCustomers")[0];
            console.log(row,name,row[0].rowIndex);
            $("#txtName").val(name);
            $("#txtEmail").val(email);
            $("#txtCity").val(city);

            $('#button1').html("<input type='button' value='Update' onclick=update(this);> <input type='button' value='Cancel' onclick=Cancel();>");      
            return false;
        }
    };
    function update(button)
    {   
        // updation code here..


    };

    function Cancel()
    {               
        $('#button1').html("<input type='button' value='Add' onclick=Add();>");
        $("#txtName").val("");
        $("#txtEmail").val("");
        $("#txtCity").val("");
        return false;
    }

---

您可以这样做：

function update(button, trindex) {
  var row = $("table tbody tr:eq(" + trindex + ")");
  row.find("td:eq(0)").html($("#txtName").val())
  row.find("td:eq(1)").html($("#txtEmail").val())
  row.find("td:eq(2)").html($("#txtCity").val())
  $('#button1').html("<input type='button' value='Add' onclick=Add();>");
};

姓名：

电子邮件：

城市：


名称
电子邮件
城市
行动

谢谢你的回答。它起作用了！！你节省了我宝贵的时间。

 table{
        width: 60%;
        margin: 20px 0;
        border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 5px;
        text-align: left;
    }

function update(button, trindex) {
  var row = $("table tbody tr:eq(" + trindex + ")");
  row.find("td:eq(0)").html($("#txtName").val())
  row.find("td:eq(1)").html($("#txtEmail").val())
  row.find("td:eq(2)").html($("#txtCity").val())
  $('#button1').html("<input type='button' value='Add' onclick=Add();>");
};