Rearrange table row in basis of class using javascript

Question

For example, I have this code:

<table>
    <tr>
      <td class="last"></td>
      <td></td>
    </tr>
    <tr>
      <td class="last"></td>
      <td></td>
    </tr>
    <tr>
      <td class="another"></td>
      <td></td>
    </tr>
    <tr>
      <td class="another"></td>
      <td></td>
    </tr>
</table>

I want this to be set like this using javascript:

<table>
    <tr>
      <td class="another"></td>
      <td></td>
    </tr>
    <tr>
      <td class="another"></td>
      <td></td>
    </tr>
    <tr>
      <td class="last"></td>
      <td></td>
    </tr>
    <tr>
      <td class="last"></td>
      <td></td>
    </tr>
</table>

Just what is needed is, javascript should detect td with class "last" and take whole table row to bottom of the table.

Answer 1

var last = $( '.last' );
last.parent().parent().append( last.parent() );

JSFiddle Demo.

last.parent().parent() is the table element, and last.parent() is the tr element.

append moves the DOM elements, so they're not "copied", they're moved to the end.

Answer 2

You can use this plugin: http://tablesorter.com/docs/#Demo

Something more advanced: http://www.trirand.com/blog/jqgrid/jqgrid.html

Answer 3

Try this...

$("table tr td.last").each(function () {
    $(this).parent().insertAfter($("table tr:last"));
});

Answer 4

try this:

$('td').each(function(){
  if ($(this).hasClass('another')) {
     $(this).insertBefore($('td:first'))
  }
})

DEMO