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

Question

我正在使用jquery和php来获取带有ajax调用的动态数据到表格格式。我有一个选择选项，我可以选择不同的公司。选择我将获得特定员工的一些数据与ajax我将数据绑定到表。但问题是如果我选择公司1然后我能够绑定公司1的数据。在公司1的数据应该消失，公司2的数据只有在那里。但在我改变公司2的情况下，以前的数据仍然存在。

下面是我的ajax调用代码：

 $.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>");

                      });
              },  
      });

下面是我的html：

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

        </tbody>
</table>

Answer 1

因为你在获取数据成功时使用append，你必须清除表上的数据，否则它只会添加下面的数据。

在你的HTML上

将attr id设置为你的<tbody>标签：

 <tbody = "bodytable">

在你的脚本上

添加代码以清除<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>");

      });

有很多方法可以做到这一点。希望这可以帮助！

Answer 2

在添加内容之前，您应先清空表格。如下所示：

success:function (response){
    $("table.table").find('tbody').empty();
        $.each(response, function( index, value ) {
             $("table.table").find('tbody').append("<tr><td>" + response.emp_name + "</td><td>"  + "</td>    <td><input type='file'></td></tr>");
    });
}.

你还应该附加在表格中。希望它能帮到你。