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

Posted 2023-05-09

【中文标题】使用 JQuery 反转表行而不触及标题行

【英文标题】：Reverse table rows with JQuery without touching the header rows

【发布时间】：2015-11-30 20:32:31

【问题描述】：

我有以下 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()

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

【问题讨论】：

你确定你的html对表格的有效性吗？

我会先修正html代码，然后从那里开始。

【参考方案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() 实现。