jquery - How to update row in the table when data is updated using ajax mvc -

i have data table , data displayed in have add edit , delete option once new data added based on response appending row table

  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); }); 

if delete row removing tr based on responce removeing row

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");     }); }); 

now want edit row table have icon @ last column once click go data base fetches data , binds html form

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);        }); } 

and have button below form

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

on update click iam collecting values form text box , passing controller updates database if refresh page table updated want out refresh

$(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 show modify table row }); 

here table

    <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> 

how can update particular row latest data... thanks

updated, try below:

getserverdata("supplier/updatesupplier", supplierdetails, function(data){      var supplierselector = "td:contains('"+ data.supplierid + "')";      //find , save parent row variable using .closest() function     $supplierrow = $(supplierselector).closest("tr");      //update name 2nd td element     $supplierrow.find("td:nth-child(2)").text(data.suppliername);      //update address 3rd td element     $supplierrow.find("td:nth-child(3)").text(data.address);      //update area 4th td element     $supplierrow.find("td:nth-child(4)").text(data.area);      //update email 5th td element     $supplierrow.find("td:nth-child(5)").text(data.email);  }); 

first :contains selector used find td has updated supplierid, after .closest() method used find nearest parent tr element. updates .find() used find correct td element , .text() updates supplier latest data. here's useful link in relation table selectors.

note haven't tested above code, hope above helps latest data updates on table elements.