CODEWITHSUNDEEP
javascriptjqueryhtml
LIGHT
LIGHT

Reputation: 5712

Rearrange table row in basis of class using javascript

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.

Upvotes: 0

Views: 886

Answers (4)

Ram
Ram

Reputation: 144699

try this:

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

DEMO

Upvotes: 0

Dan Lister
Dan Lister

Reputation: 2583

Try this...

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

Upvotes: 0

Thiago Bocchile
Thiago Bocchile

Reputation: 11

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

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

Upvotes: 1

Florian Margaine
Florian Margaine

Reputation: 60777

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.

Upvotes: 1

Related Questions