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的{{1}}，之后使用.closest()方法查找最近的父SupplierId元件。对于更新，.find()用于查找正确的tr元素，最后.text()使用最新数据更新供应商。这是与table selectors相关的另一个有用链接。

注意我还没有测试过上面的代码，但我希望上面的内容可以帮助您获取td元素的最新数据更新。

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

1 个答案: