Question

我如何使用jQuery来反转除了第一个和最后一个之外的所有tr。

我已经看到了几个关于如何将它们全部反转的例子，但是无法弄清楚如何将其中的任何一个用第一个和最后一个来指定所有。

示例html标记在下面

    <table class="homepagemodule report" id="league_chat" align="center" cellspacing="1">
      <caption>
        <span href="javascript:void(0);" style="visibility: visible;" class="module_expand" classname="module_expand">[-]</span>
        <span>League Chat <a href="javascript:chat_window('http://www15.myfantasyleague.com/2015/chat?L=65821&amp;COUNT=40');"><img src="http://www15.myfantasyleague.com/window-16x16.png" title="New Window" alt="New Window" border="0" height="16" width="16"/></a></span>
      </caption>
      <tbody>

<!-- DO NOT REVERSE FIRST TR BELOW -->
        <tr>
          <th>By</th>
          <th>Message</th>
        </tr>

<!-- REVERSE ALL TR HERE  -->
        <tr class="oddtablerow" classname="oddtablerow" title="Posted: Wed May 20 5:03:43 p.m. ET 2015" id="1432155823grk906">
          <td>Commissioner</td>
          <td>test</td>
        </tr>
        <tr class="eventablerow" classname="eventablerow" title="Posted: Sun May 3 10:05:04 a.m. ET 2015" id="1430661904spl184">
          <td>
            <b>Franchise 1</b>
          </td>
          <td>
            <b>test</b>
          </td>
        </tr>
        <tr class="oddtablerow" classname="oddtablerow" title="Posted: Sat May 2 6:59:25 p.m. ET 2015" id="1430607565cyo906">
          <td>Commissioner</td>
          <td>test</td>
        </tr>
        <tr class="eventablerow" classname="eventablerow" title="Posted: Sat May 2 6:59:19 p.m. ET 2015" id="1430607559qma757">
          <td>
            <b>Commissioner</b>
          </td>
          <td>
            <b>asdfasdf</b>
          </td>
        </tr>
        <tr class="oddtablerow" classname="oddtablerow" title="Posted: Sat May 2 6:59:14 p.m. ET 2015" id="1430607554imv113">
          <td>
            <b>Commissioner</b>
          </td>
          <td>
            <b>asdfasdf</b>
          </td>
        </tr>
        <tr class="eventablerow" classname="eventablerow" title="Posted: Sat May 2 6:59:08 p.m. ET 2015" id="1430607548soa621">
          <td>Commissioner</td>
          <td>asdfa</td>
        </tr>

<!-- DO NOT REVERSE LAST TR BELOW -->
        <tr classname="oddtablerow" class="oddtablerow">
          <td colspan="2">
            <form action="" name="chat"><input name="chat" id="chat_text_field" size="30" maxlength="200" type="text"/><input onclick="postChatMessage();" value="Post" type="button"/><a href="javascript:toggle_chat_audio();"><img id="chat_audio_icon" src="http://www15.myfantasyleague.com/sound-off-16x16.png" title="Chat Muted" alt="Chat Muted" border="0" height="16" width="16"/></a> <a href="javascript:document.chat.chat.value=':clear:'; postChatMessage();"><img src="http://www15.myfantasyleague.com/note-remove-16x16.png" title="Clear Messages" alt="Clear Messages" border="0" height="16" width="16"/></a> <a href="http://football15.myfantasyleague.com/2015/options?L=65821&amp;O=222" target="_blank"><img src="http://www15.myfantasyleague.com/mflicons/video.gif" class="videoconferenceicon" title="League Videoconference" alt="League Videoconference" border="0" height="11" width="16"/></a><br/><span id="visitor_count">1</span> leaguemates on-line: <span id="visitor_list">Commissioner</span><br/> Send Message To: <select size="1" name="TO_FID"><option value="">Everyone</option><option value="0000">Commissioner</option><option value="0001">Franchise 1</option><option value="0002">Franchise 2</option><option value="0003">Franchise 3</option><option value="0004">Franchise 4</option><option value="0005">Franchise 5</option><option value="0006">Franchise 6</option><option value="0007">Franchise 7</option><option value="0008">My Team</option><option value="0009">Franchise 9</option><option value="0010">Franchise 10</option><option value="0011">Franchise 11</option><option value="0012">Franchise 12</option></select></form>
          </td>
        </tr>
      </tbody>
    </table>

Answer 1

使用:first和:last以及reverse()，您可以

var table = $('table');
var rows = table.find('tr:not(:first):not(:last)');

$('tr:first').after(rows.get().reverse());

注意，您必须使用after()，因为append只会添加所有反转的行（包括第一行）。

BEFORE

AFTER

另请参阅jQuery reversing the order of child elements

Answer 2

您看到的示例可能使用此选择器：

$('#league_chat tr')

将'league_chart'作为你桌子的ID。您需要做的就是将选择器更改为：

$('#league_chat tr:not(:first-child):not(:last-child)')

顺便说一句，我看到你在表的每个tr中添加了类，将它们标记为奇数行或偶数行。这不是必需的，因为您可以使用以下选择器检索行：

$('#league_chat tr:nth-child(odd)')
$('#league_chat tr:nth-child(even)')

所以这里是完整的代码（不能从这里测试，但应该工作）：

var $firstTr = $('#league_chat tr:first-child');
var $reversedTrs = $('#league_chat tr:not(:first-child):not(:last-child)').reverse();
var $lastTr = $('#league_chat tr:last-child');
//erase all TRs
$('#league_chat').empty();
//append first TR
$('#league_chat').append($firstTr);
//append reversed TRs
$reversedTrs.each(function() {
  $('#league_chat').append($(this));
});
//append last TR
$('#league_chat').append($lastTr);

如何反转所有表tr但首先和最后

2 个答案: