如何反转表的行顺序

How can i reverse the table row order

本文关键字：顺序 何反转      更新时间：2023-09-26

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

http://jsfiddle.net/Ybyjx/6/

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

您可以使用get()来获取本机nodeList，然后使用reverse()来反转它，然后再将它添加回来
最后一个被not() 排除在外

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

FIDDLE

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

在大多数需要保持第一行和最后一行不变的情况下，您可能需要使用页眉和页脚示例解决方案

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

这是一种简单的方法。

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