在不触及 header 行的情况下，用 JQuery 反转 table 行

Question

我有以下 HTML table 结构。我需要反转每个 header 行之后的 table 行的顺序。 header 行必须保持不变。

<tbody>
  <tr><td colspan="4">Header</td></tr>
  <tr class="content">content 4</tr>
  <tr class="content">content 3</tr>
  <tr class="content">content 2</tr>
  <tr class="content">content 1</tr>
  <tr><td colspan="4">Header 2</td></tr>
  <tr class="content">content 2</tr>
  <tr class="content">content 1</tr>
  <tr><td colspan="4">Header 3</td></tr>
  <tr class="content">content 2</tr>
  <tr class="content">content 1</tr>
</tbody>

我尝试了以下代码来反转行：

$("tbody").each(function(elem,index) {
 var arr = $.makeArray($(".content",this).detach());
 arr.reverse();
 $(this).append(arr);

});

然而它弄乱了我的 header 行。

我最初尝试使用

插入行

JQuery.after()

但是它插入的行的顺序与我想要的相反。有什么想法可以在这里完成吗？

Answer 1

首先，您的HTML无效。 .content tr 元素应该用 td 包裹内容。其次，如果将 class 添加到标题 tr 元素，则可以循环遍历它们并使用 nextUntil() 查找其间的 tr 元素。最后，您可以通过遍历它们来反转标题下 tr 的顺序，并将它们直接附加在当前 header tr 之后。试试这个：

$('tr.header').each(function() {
  var $header = $(this);
  $(this).nextUntil('.header').each(function() {
    $(this).insertAfter($header);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="header">
      <td colspan="4">Header</td>
    </tr>
    <tr class="content">
      <td>content 4
        <td>
    </tr>
    <tr class="content">
      <td>content 3
        <td>
    </tr>
    <tr class="content">
      <td>content 2
        <td>
    </tr>
    <tr class="content">
      <td>content 1
        <td>
    </tr>
    <tr class="header">
      <td colspan="4">Header 2</td>
    </tr>
    <tr class="content">
      <td>content 2
        <td>
    </tr>
    <tr class="content">
      <td>content 1
        <td>
    </tr>
    <tr class="header">
      <td colspan="4">Header 3</td>
    </tr>
    <tr class="content">
      <td>content 2
        <td>
    </tr>
    <tr class="content">
      <td>content 1
        <td>
    </tr>
  </tbody>
</table>

正如我上面提到的，这只是颠倒了元素的顺序。如果您特别需要订购它们，您可以根据需要将第二个循环更改为您自己的 sort() 实现。

在不触及 header 行的情况下，用 JQuery 反转 table 行

Reverse table rows with JQuery without touching the header rows

html

jquery

dom

dom-manipulation