jQuery Collapse无法正常工作

Question

当前情况：

我有一个带有表格的html页面来显示我的数据。数据来自jQuery ajax响应。我将数据追加到表中。但是由于某种原因，它两次显示数据，而css对于附加部分不起作用。 css由我正在使用的模板处理]

HTML：

<table id="js-table-sections" class="js-table-sections table table-hover">
jQuery：

$('.js-data-example-ajax').select2({
  ajax: {
    url: '/product/api/elasticsearch',
    dataType: 'json',
    width: 'resolve', // need to override the changed default
    minimumResultsForSearch: -1,
    dropdownCssClass: 'select2-hidden',

    success: function (data) {
      // var returnedData = data;
      // clear table
      $('#js-table-sections tbody').empty();                    
      // addProducts(data.results[0]);                              
      for(let i = 0; i < data.results.length; i++){
        $("#js-table-sections")
          .find('tbody')
          .append(
            $('<tr><td class="text-center"><i class="fa fa-angle-right"></i></td><td class="font-     w600">data.results[i].id</td><td><span class="badge badge-success">VIP</span></td><td class="d-none d-sm-table-cell"><em class="text-muted">October 28, 2017 12:16</em></td></tr></tbody>')
          );                            
      }
    }
  }
});
目标实现：

• 为什么我会得到重复的内容
• 是否有将数据追加到我的表的有效方法

更新：

正在从此CSS导入。js-data-example-ajax

<!-- select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/gh/ttskch/select2-bootstrap4-theme@master/dist/select2-bootstrap4.min.css" rel="stylesheet">

更新2：

<table id="js-table-sections" class="js-table-sections table table-hover">
    <thead>
        <tr>
            <th style="width: 30px;"></th>
            <th>Name</th>
            <th style="width: 15%;">Access</th>
            <th class="d-none d-sm-table-cell" style="width: 20%;">Date</th>
        </tr>
    </thead>
    <tbody class="js-table-sections-header show table-active">
        <tr>
            <td class="text-center">
                <i class="fa fa-angle-right"></i>
            </td>
            <td class="font-w600">Brian Stevens</td>
            <td>
                <span class="badge badge-success">VIP</span>
            </td>
            <td class="d-none d-sm-table-cell">
                <em class="text-muted">October 28, 2017 12:16</em>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="text-center"></td>
            <td class="font-w600 text-success">+ $185,00</td>
            <td class="font-size-sm">Stripe</td>
            <td class="d-none d-sm-table-cell">
                <span class="font-size-sm text-muted">October 19, 2017 12:16</span>
            </td>
        </tr>                                   
    </tbody>                                                    
</table>

当前情况：我有一个带有页面的html页面，以显示我的数据。数据来自jQuery ajax响应。我将数据追加到表中。但是由于某种原因，它显示了两个数据...

Answer 1

[附加时不需要添加</tbody>，只需要</tr>就可以。

let tbody = $('#js-table-sections tbody');
tbody.empty();

for (let i = 0; i < data.results.length; i++) {

  tbody.append(
    (`<tr>
      <td class="text-center"><i class="fa fa-angle-right"></i></td>
      <td class="font-w600">data.results[i].id</td>
      <td><span class="badge badge-success">VIP</span></td>
      <td class="d-none d-sm-table-cell"><em class="text-muted">October 28, 2017 12:16</em></td>
    </tr>`);
  );

}