Question

我有以下HTML表格结构。我需要在每个标题行之后反转表行的顺序。标题行必须保持不变。

<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);

}）;

然而它弄乱了我的标题行。

我最初尝试使用

插入行

JQuery.after()

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

Answer 1

首先，您的HTML无效。 .content tr元素应包含td内容。其次，如果您向标题tr元素添加一个类，则可以循环使用它们并使用nextUntil()查找之间的tr元素。最后，您可以通过循环遍历标题下的tr的顺序，并在当前标题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()实现。

使用JQuery反转表行而不触及标题行

1 个答案: