CODEWITHSUNDEEP
jqueryhtmlajax
itsme
itsme

Reputation: 400

Remove the existing table row before appending to the table using jquery

I Have a Html table in that I am doing update using Ajax.It is working fine.When I click on the Edit button values displaying to the textboxes fine and then when I click on the Add button.The table is look like below .I am appending to the table.What I want is Before appending to the table row remove the clicked row from the table.When I refresh the page extra row is gone.How can i do that.I tried different ways it is not working.I am Still new to Jquery.Please help me.Thanks in Advance.enter image description here

Assigning data to the textboxes

$(function(){
  var rowToDelete = undefined;
  $(".scrollingTable  tbody  .edit").click(function(event){
    rowToDelete = $(this).parents('tr');
    event.preventDefault();
    id=$(this).attr('href');
     $.ajax({
         url : "/Demo/Vendorcontroller/showgriddata",
         type: "POST",
         data: {
             cntid: id
         },success: function(response){
           var data = response;
          $("#num").val(data[0].id);
          $("#name").val(data[0].vndr_cntname);
          $("#designation").val(data[0].designation);
          $("#mobilegr").val(data[0].vndr_cntmobile);
          $("#maildgr").val(data[0].vndr_cntmail);
        }
     });
  });
});

Adding data to the table

   $(function(){
  $('.txtcbt #add').click(function(){
    var cntname,designation,mobile,email,vndrid,id,cid;
    cid=$("#num").val();
    cntname =$("#name").val();
    designation=$("#designation").val();
    mobile=    $("#mobilegr").val();
    email=$("#maildgr").val();
    vndrid= $("#vnum").val();
    if(cntname =="" || designation== "" || mobile=="" || email==""){
      alert("fields should not be empty");
    }else{
      $.ajax({
        url : "/Demo/Vendorcontroller/insertupdate",
        type: "POST",
        data: {
            id:  cid,
            name: cntname,
            dgnation:designation,
            mobileno:mobile,
            emailid:email,
            vid:vndrid
        },
        success:function(response) {
          rowToDelete.remove();
           var dat=response;
          var  tbody = $('#cnttable tbody'),
               prop = ["vndr_cntname", "designation","vndr_cntmobile","vndr_cntmail"];
               $.each(dat, function(i, dat) {
                 var tr = $('<tr>');
                 $.each(prop, function(i, prop) {
                   $('<td>').html(dat[prop]).appendTo(tr);
                 });
                 $('<td>').html("<a class='edit' href='"+dat["id"]+"'><i class='fa fa-edit fa-2x'></i></a>").appendTo(tr);
                  $('<td>').html("<a class='delete' href='"+dat["id"]+"'><i class='fa fa-remove fa-2x'></i></a>").appendTo(tr);
                 tbody.append(tr);
               });

          $("#num").val("");
          $('#name').val("");
          $('#designation').val("");
          $('#mobilegr').val("")
          $('#maildgr').val("");
        }
    });
    }
  });
});

----HTML table

<div id="tables" class="scrollingTable" style="max-height:175px;overflow: auto; width:100%;">
  <table cellspacing="0" cellpadding="0" id=cnttable>
    <thead>
      <tr>
        <th style="width:27%;text-align:center;font-size:17px;">Name</th>
        <th style="width:21%;text-align:center;font-size:17px;">Designation</th>
        <th style="width:13%;text-align:center;font-size:17px;">Mobile</th>
        <th style="width:27%;text-align:center;font-size:17px;">Email-Id</th>
        <th style="width:4%;text-align:center;font-size:17px;">Edit</th>
        <th style="width:5%;text-align:center;font-size:17px;">Delete</th>
      </tr>
    </thead>
    <tbody>
</tbody>
</table>
</div>

Upvotes: 0

Views: 1785

Answers (3)

Jasbir
Jasbir

Reputation: 376

You need to refresh your table on ajax success function, Put this code inside the ajax success funtion

// editted with table id

$('#cnttable').load(document.URL + ' #cnttable');

Replace this id from your table id

Upvotes: 0

Rohit Sharma
Rohit Sharma

Reputation: 3334

If you want to remove the tr uniquely, you need to identify it before updating it (you can use a temp variable for the same on clicking the edit button.) like:

var rowToDelete = undefined;
$('selctorForEditButton').on('click', function(){
    rowToDelete = $(this).parents('tr');
});

when you click on the add button just remove the saved row:

$('.txtcbt #add').on('click', function(){
    //ajax code here
    //in success block just remove the saved row
    rowToDelete.remove();
    //append the new row again here
});

Upvotes: 1

jiajia747
jiajia747

Reputation: 1

I'm sorry I'm from China English is not strong, I understand your problem is click on the edit button to submit data but come out a new line. Correct is to modify the original data to old that line, you posted code is relatively small, I initially determine the cid ajax obtained in the background query data, start the debug view there is no corresponding data, this is an update instead of add , Please check the background interface

Upvotes: 0

Related Questions