附加ajax调用表不清除jquery php中的先前数据？

Question

I am working with jquery and php to get dynamic data with ajax call into table format. I have one select option where i can choose different companies.Onselect i will get some data of particular employee with ajax i am binding that data to table. But problem is if i choose company 1 then i can able to bind data of company 1. onchange company 2 data of company 1 should be disappear and company 2's data only be there. but in my condition onchange company 2 previous data is still there.

Below is my ajax call code:

 $.ajax({

          method: "GET",
           dataType: 'json',
           url:"getdata.php?id="+emp_id,
              success:function (response){
                     $.each(response, function( index, value ) {

                              $("table.table").append("<tr><td>" + response.emp_name + "</td><td>"  + "</td><td><input type='file'></td></tr>");

                      });
              },  
      });

Below is my html:

<table class="table">
        <thead>
        <tr>
            <th>Employee Name</th>
            <th></th>
        </tr>
        </thead>
        <tbody>

        </tbody>
</table>

Answer 1

since you use append on success of getting data, you must clear the data on your table or else it will only add data below.

ON YOUR HTML

Set attr id to your <tbody> tag:

 <tbody = "bodytable">

ON YOUR SCRIPT

add code to clear the data on your <tbody>

          $("bodytable").empty();

 $.each(response, function( index, value ) {

      $("table.table").append("<tr><td>" + response.emp_name + "</td><td>"  + "</td><td><input type='file'></td></tr>");

      });

There are many ways to do that. Hope this helps!