javascript - 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>')
          );                            
      }
    }
  }
});

要实现的目标:

• 为什么我得到重复的内容
• 有没有一种有效的方法可以将数据附加到我的表中

更新:.js-data-example-ajax 正在从此 css 导入

<!-- 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>

Answer 1

首先，您需要更正语法以获得正确的结构，让您的合拢发挥作用。其次，一旦完成 append()，就需要再次调用折叠逻辑。请在下面找到修改后的版本

$('.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) {
            let table = $('#js-table-sections');
            table.find('tbody').remove();
            if (data && Array.isArray(data.results)) {
                data.results.forEach(item => {
                    table.append
                        (`<tbody class="js-table-sections-header table-active">
                        <tr>
                            <td class="text-center">
                                <i class="fa fa-angle-right"></i>
                            </td>
                            <td class="font-w600">${item.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>
                    <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>
                        <!--  <tr>
                            <td class="text-center"></td>
                            <td class="font-w600 text-success">+ $${item.rma}</td>
                            <td class="font-size-sm">Stripe</td>
                            <td class="d-none d-sm-table-cell">
                                <span class="font-size-sm text-muted">October 1, 2017 12:16</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-center"></td>
                            <td class="font-w600 text-success">+ $51,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 9, 2017 12:16</span>
                            </td>
                        </tr> -->
                    </tbody>`);
                });
            }
            jQuery(".js-table-sections-header > tr").on("click.cb.helpers", function (e) {
                if (!("checkbox" === e.target.type || "button" === e.target.type || "a" === e.target.tagName.toLowerCase() || jQuery(e.target).parent("a").length || jQuery(e.target).parent("button").length || jQuery(e.target).parent(".custom-control").length || jQuery(e.target).parent("label").length)) {
                    var a = jQuery(e.currentTarget).parent("tbody");
                    a.hasClass("show") || jQuery("tbody").removeClass("show table-active"),
                        a.toggleClass("show table-active")
                }
            })
        }
    }
});