CODEWITHSUNDEEP
jquery
MShack
MShack

Reputation: 652

How to reverse all table tr but first and last

How can i use jQuery to reverse all the tr except first and last ones.

I have seen several examples on how to reverse them all , but cant figure out how to incorporate any of those to specify all by first and last ones.

example html marked up below

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

Upvotes: 0

Views: 1615

Answers (2)

lucasnadalutti
lucasnadalutti

Reputation: 5948

The examples that you have seen probably use this selector:

$('#league_chat tr')

being 'league_chart' your table's ID. All you need to do is change the selector to be:

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

By the way, I see that you added classes to each tr of your table to mark them as odd or even rows. This is not necessary, as you can retrieve your rows using the following selectors:

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

So here is the full code (can't test it from here but should work):

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

Upvotes: 1

AmmarCSE
AmmarCSE

Reputation: 30557

Using :first and :last as well as reverse(), you can do

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

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

Notice, you have to use after() because append will simply add all rows reversed(including first row).

BEFORE

AFTER

Also, see jQuery reversing the order of child elements

Upvotes: 2

Related Questions