Question

我正在尝试反转表行顺序，但第一行/最后一行除外。有一个jsfiddle设置，即反转所有tr但需要使最后一行和第一行免除脚本

   <table id="league_chat">
        <tbody>
            <tr><td>ALWAYS LEAVE THIS TR AT THE TOP/td></tr>
            <tr><td>lots of custom content</td></tr>
            <tr><td>lots of other custom content</td></tr>
            <tr><td>more custom content</td></tr>
            <tr><td>even more custom content</td></tr>
            <tr class="reportfooter"><td>ALWAYS LEAVE THIS TR AT THE BOTTOM</td></tr>
        </tbody>
    </table>

tbody = $('#league_chat tbody');
tbody.children().each(function (i, tr) {
    tbody.prepend(tr);
});

Answer 1

您可以使用get()获取原生nodeList，然后reverse()将其反转，然后将其添加回来。
最后一个被排除在not()

之外

var tbody = $('#league_chat tbody');

$('tr:first', tbody).after( $('tr', tbody).not(':last', ':first').get().reverse() );

FIDDLE

Answer 2

tbody = $('#league_chat tbody');
tbody.children().not(':first').not(":last").each(function (i, tr) {
    tbody.find('tr:first').after(tr);
});

Answer 3

在大多数需要保持第一行和最后一行不变的情况下，您可能需要使用页眉和页脚Sample Solution

<table id="league_chat">
    <thead>
        <tr><td>ALWAYS LEAVE THIS TR AT THE TOP</td></tr>
    </thead>
    <tbody>        
        <tr><td>lots of custom content</td></tr>
        <tr><td>lots of other custom content</td></tr>
        <tr><td>more custom content</td></tr>
        <tr><td>even more custom content</td></tr>        
    </tbody>
    <tfoot>
        <tr class="reportfooter"><td>ALWAYS LEAVE THIS TR AT THE BOTTOM</td></tr>
    </tfoot>
</table>

Answer 4

这是一种简单的方法。

 tbody.children().not('.reportfooter').each(function (i, tr) {
        $('#league_chat tbody tr:first').after(tr);
    });

如何反转表行顺序

4 个答案: