rearrange td by class

Question

I am going to try and explain this as best as I can, so here goes...

I have several <tr> tags each with a class="one" or class="two" and so on.

Here is the code. I added the class to each one of these via jQuery since I do not have direct access to the markup.

What I want to do is rearrange the complete td tag and all its contents by the class order. So class="1" td would be first, class="2" second and so on. Any ideas?

<tr class="4"> 
  <td align="center" rowspan="6"><img border="0" src="/v/vspfiles/assets/images/one.jpg" alt=""> 
   <a title="217/00004/00 Counterring" href="/217-00004-00-Counterring-p/217-fslash-00004-fslash-00.htm">
   <img border="0" alt="217/00004/00 Counterring" src="/v/vspfiles/photos/217-fslash-00004-fslash-00-0.jpg"></a> 
  </td> 
  <td rowspan="6"> 
   <img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
  </td> 
  <td background="/v/vspfiles/templates/100/images/Grid_Single_Divider_Vert.gif" rowspan="6"> 
    <img width="1" height="1" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
  </td> 
  <td rowspan="4"> 
  <img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
  </td> 
  <td colspan="9"><img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"></td> 
</tr>

<tr class="3"> 
   <td align="center" rowspan="6"><img border="0" src="/v/vspfiles/assets/images/one.jpg" alt=""> 
<a title="217/00004/00 Counterring" href="/217-00004-00-Counterring-p/217-fslash-00004-fslash-00.htm">
<img border="0" alt="217/00004/00 Counterring" src="/v/vspfiles/photos/217-fslash-00004-fslash-00-0.jpg"></a> 
</td> 
<td rowspan="6"> 
<img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
</td> 
 <td background="/v/vspfiles/templates/100/images/Grid_Single_Divider_Vert.gif" rowspan="6"> 
 <img width="1" height="1" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
 </td> 
 <td rowspan="4"> 
 <img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
 </td> 
 <td colspan="9"><img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"></td> 
 </tr>

 <tr class="1"> 
 <td align="center" rowspan="6"><img border="0" src="/v/vspfiles/assets/images/one.jpg" alt=""> 
 <a title="217/00004/00 Counterring" href="/217-00004-00-Counterring-p/217-fslash-00004-fslash-00.htm">
 <img border="0" alt="217/00004/00 Counterring" src="/v/vspfiles/photos/217-fslash-00004-fslash-00-0.jpg"></a> 
 </td> 
 <td rowspan="6"> 
 <img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
 </td> 
 <td background="/v/vspfiles/templates/100/images/Grid_Single_Divider_Vert.gif" rowspan="6"> 
<img width="1" height="1" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
</td> 
<td rowspan="4"> 
<img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
</td> 
<td colspan="9"><img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"></td> 
</tr>

<tr class="2"> 
<td align="center" rowspan="6"><img border="0" src="/v/vspfiles/assets/images/one.jpg" alt=""> 
<a title="217/00004/00 Counterring" href="/217-00004-00-Counterring-p/217-fslash-00004-fslash-00.htm">
<img border="0" alt="217/00004/00 Counterring" src="/v/vspfiles/photos/217-fslash-00004-fslash-00-0.jpg"></a> 
</td> 
<td rowspan="6"> 
<img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
</td> 
<td background="/v/vspfiles/templates/100/images/Grid_Single_Divider_Vert.gif" rowspan="6"> 
<img width="1" height="1" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
</td> 
<td rowspan="4"> 
<img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
</td> 
<td colspan="9"><img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"></td> 
</tr>

Answer 1

I use jQuery table sorter (http://tablesorter.com/docs/)--may you could use this plugin to accomplish what you need or learn from reading the code.

Also, @petersenDidit: Did you know that jQuery 1.4.3 added support for HTML5 data- attributes so you can fetch them with data()? It also does type conversion. This can make the code you submitted (and later deleted) a bit cleaner:

http://jsfiddle.net/hybernaut/P3EgG/2/

Not to criticize--this is something I just learned myself, and I thought you would enjoy.

Answer 2

You can get an array of all <tr>s using the get function, and use the native sort function to sort it. Here I'm using append, which moves the element if I only get a single <table> (otherwise, you'd want to loop over the tables using each):

var trs = $('tr');
var sorted = trs.get().sort(
    function(a,b){
        return $(a).attr('class') > $(b).attr('class');
            }
        );
$('table').append(sorted);

Working example: http://jsfiddle.net/kobi/fJkcY/