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

【问题标题】：append with ajax call on table not clearing previous data in jquery php?在表上附加ajax调用不清除jquery php中的先前数据？
【发布时间】：2019-07-09 03:56:58
【问题描述】：

我正在使用 jquery 和 php 通过 ajax 调用获取动态数据成表格格式。我有一个可供选择的选项不同的公司。Onselect 我会得到一些特定的数据使用 ajax 的员工我将该数据绑定到表。但问题是如果我选择公司 1 然后我可以绑定公司 1 的数据。onchange 公司 1 的公司 2 数据应该消失，公司 2 的数据只有在那里。但在我的情况下 onchange company 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>

【问题讨论】：

标签： php jquery ajax append

【解决方案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>");

      });

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

【讨论】：

【解决方案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>");
    });
}.

您还应该在表 tbody 中附加。希望对你有帮助。

【讨论】：