使用ajax mvc更新数据时如何更新表中的行

Question

我有一个数据表，其中显示了一些数据

  GetServerData("Supplier/AddSupplier/", Supplierdetails, function (data) {

    if (data != null) {
       var row = "";
        var Address = data.Address;
        var Area = data.Area;
        var SupplierId = data.SupplierId;
        var SupplierName = data.SupplierName;         
        var Email = data.Email;
    }

    row += "<tr><td>" + SupplierId + "</td><td>" + SupplierName + "</td><td>" + Address + "</td><td>" + Area + "</td><td>" + Email + "</td><td><i class='tbl_edit_btn fa fa-edit Editsupplier' onclick=\"EditSupplier(" + SupplierId + ")\"></i><i class='tbl_del_btn fa fa-trash' data-id=" + SupplierId + "></i></td></tr>"

    $('#suplierlistbody').append(row);
});

如果我删除行，我将根据我删除行的响应删除 tr

var url = "DeleteSupplier";
$('.DeleteSupplier').click(function () {
    var row = $(this).closest('tr');
    $.post(url, { id: $(this).data('id') }, function (response) {
        if (response) {
            row.remove();
        }
    }).fail(function (response) {
        alert("Delete Failed");
    });
});

现在我想编辑表格中的一行，所以一旦我点击它就会在最后一列有一个图标，它将进入数据库获取数据并将其绑定到 html 表单

function EditSupplier(SupplierId) {

GetServerData("Supplier/GetSupplierById/" + SupplierId, null, function (data) {

    $('#supplier_Id').val(data.SupplierId);
    $('#supplier_name').val(data.SupplierName);
    $('#supplier_address').val(data.Address);
    $('#supplier_area').val(data.Area);       
});
}

我在表单下方有按钮

 <button type="button" id="update">update</button>

在更新时单击 iam 收集值表单文本框并传递给控制器​​，以便如果我刷新我的页面我的表已更新但我想在不刷新的情况下更新我的数据库

$(document).on('click', '#updatesupplier', function () {

var SupplierId = $('#supplier_Id').val();
var SupplierName = $('#supplier_name').val();
var Address = $('#supplier_address').val();
var Area = $('#supplier_area').val();

 var Supplierdetails = {
        "SupplierId":SupplierId,
        "SupplierName": SupplierName,
        "Address": Address,
        "Area": Area,
}
     GetServerData("Supplier/UpdateSupplier", Supplierdetails, function(data){
// Here iam getting updated data back now i show modify my table row
});

这是我的桌子

    <table class="table " id="suppliertable">
       <thead>
          <td>S.NO</td>
          <th>Supplier name</th>
          <th>Address</th>
          <th>Area</th>
          <th>E-mail</th>
          <th width="100">Action</th>
       </thead>
<tbody id="suplierlistbody">
       @foreach (var items in Model)
       {
       <tr>
          <td>@items.SupplierId</td>
          <td>@items.SupplierName</td>
          <td>@items.Address</td>
          <td>@items.Area</td>
          <td>@items.Email</td>
          <td>
             <i class="tbl_edit_btn fa fa-edit Editsupplier" onclick="EditSupplier(@items.SupplierId)"></i>
             <i class="tbl_del_btn fa fa-trash Deletesupplier" data-id="(@items.SupplierId)"></i>
          </td>
       </tr>
       }
    </table>

如何使用最新数据更新特定行... 谢谢

Answer 1

更新，试试下面的方法：

GetServerData("Supplier/UpdateSupplier", Supplierdetails, function(data){

    var supplierSelector = "td:contains('"+ data.SupplierId + "')";

    //find and save parent row into variable using .closest() function
    $supplierRow = $(supplierSelector).closest("tr");

    //update name which is the 2nd td element
    $supplierRow.find("td:nth-child(2)").text(data.SupplierName);

    //update Address which is the 3rd td element
    $supplierRow.find("td:nth-child(3)").text(data.Address);

    //update Area which is the 4th td element
    $supplierRow.find("td:nth-child(4)").text(data.Area);

    //update Email which is the 5th td element
    $supplierRow.find("td:nth-child(5)").text(data.Email);

});

第一个:contains 选择器用于查找td 具有更新的SupplierId，之后.closest() 方法用于查找最近的父tr 元素。对于更新，.find() 用于查找正确的td 元素，最后.text() 使用最新数据更新供应商。这是另一个与 table selectors 相关的有用链接。

注意我没有测试上面的代码，但是我希望上面的代码可以帮助你获得最新的数据更新到你的table元素。