與JQuery顛倒表格行而不觸及標題行

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無效。 .contenttr元素應該包含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()實施。