Question

我有一些带有这些html结构的动态生成表

<table class="deliver">
  <tbody class="tbody">
    <tr id="10" data-position="10">
      <td>Title</td>
    </tr>
    <tr id="10" data-position="10">
      <td>Content</td>
    </tr>
    <tr id="23" data-position="23">
      <td>Title</td>
    </tr>
    <tr id="23" data-position="23">
      <td>Content</td>
    </tr>
  </tbody>
</table>

<table class="deliver">
  <tbody class="tbody">
    <tr id="3" data-position="3">
      <td>Title</td>
    </tr>
    <tr id="3" data-position="3">
      <td>Content</td>
    </tr>
    <tr id="2" data-position="2">
      <td>Title</td>
    </tr>
    <tr id="2" data-position="2">
      <td>Content</td>
    </tr>
    <tr id="2" data-position="2">
      <td>Extra content (sometimes)</td>
    </tr>
  </tbody>
</table>

每个表格都有 tbody 和 tr 。 id和数据位置范围在1到23之间。我需要某种排序方法来保持标题 - 内容对，但是在每个表中对id进行排序。我找到了this和this教程，但在我的情况下没有用（没有任何反应）。

我的代码段看起来像这样

$(".tbody").each(function(){
    $(this).html($(this).children('tr').sort(function(a, b){
        return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;
    }));
});

Answer 1

您可以使用Array.prototype.sort回调进行非平凡的排序。

下面的演示循环遍历所有表并对<tr>进行排序，同时尊重data-position属性升序（1,2,3 ...），在内容之前保留标题

＆＃13;

// Loop over all tables
$('table').each(function() {
  // Retrieve references to current table TR elements
  let collection = Array.from(this.querySelectorAll('tr'))
      .sort(function(x, y) {
        let posX = +x.dataset.position
            ,posY = +y.dataset.position;
        // Behavior when items haven't the same position
        if (posX != posY) {
            return posX > posY ? 1 : -1;
        }
        // When items have the same position
        return x.textContent.toLowerCase().trim() == 'Title' ? 1 : -1;
      })
  ;

  // Finally move items into the container using the computed order
  collection.forEach(element => {
    this.querySelector('.tbody').append(element);
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="deliver">
  <tbody class="tbody">
    <tr data-position="23">
      <td>Title 23</td>
    </tr>
    <tr data-position="23">
      <td>Content 23</td>
    </tr>
    <tr data-position="10">
      <td>Title 10</td>
    </tr>
    <tr data-position="10">
      <td>Content 10</td>
    </tr>
    <tr data-position="12">
      <td>Title 12</td>
    </tr>
    <tr data-position="12">
      <td>Content 12</td>
    </tr>
  </tbody>
</table>

＆＃13;

jQuery订单表tr由data-position或id组成

1 个答案: