rearrange td by class

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-fslas开发者_JS百科h-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>

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.

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/

I'm a little confused since it seems to be the <tr> elements that have the numeric class, not the <td>.

If you mean <tr>, then try this:

(This assumes that your <table> has an ID of myTable, and the class names of the tr elements begin with tr_.)

  var $tbody = $('#myTable > tbody');   // cache reference to the table's tbody
  var $trs = $tbody.find('tr'); // find the tr elements

  $trs.sort(function(a,b) {
       // Get the numeric portion of the class
    var class_a = a.className.slice( a.className.indexOf( '_' ) + 1 );
    var class_b = b.className.slice( b.className.indexOf( '_' ) + 1 );
    return class_a - class_b;
  });

  $tbody.append($trs);  // append the sorted tr elements

EDIT: Changed it so that it uses the table's <tbody> element. Make sure your markup has a <tbody> for consistency.

EDIT: It may be safer to use .get() to get an Array of DOM elements as @Kobi did in his answer, since sort is listed in the source as being for internal use only, and as such, you can't rely on it being present in the future.

Use the element sorter plugin, or see this question.

[Working example]

(function(window){

// array functions are not working
// on nodeLists on IE, we need to
// to convert them to array
function toArray( obj ) {
  var i, arr = [];
  for ( i = obj.length; i--; ){
    arr[i] = obj[i];
  }
  return arr;
}

// custom compare function for sorting
// by the class
function sortByClass( a, b ) {
  if ( a.className < b.className ) return -1;
  else if( a.className > b.className ) return 1;
  else return 0;
}

window.sortElements = function(id, tag) {

  // select the elements to be ordered
  var root  = document.getElementById(id),
      items = root.getElementsByTagName(tag),
      len   = items.length;

  // convert to array, to make sorting possible
  items = toArray( items );

  // do the item sorting by their class
  items = items.sort( sortByClass );

  // append them back to the parent in order
  for ( var i = 0; i < len; i++ ) {
    root.appendChild( items[i] );
  }
};

})(this);

You can achieve this by iterating over each tr, detaching the child tds, converting them to an array, sorting them, and then inserting back into the tr.

$("tr").each(function() {
    var tr = $(this);
    var tds = $("td",tr).detach().get();
    tds.sort(function(x,y) {
        var vx = parseInt($(x).attr("class"));
        var vy = parseInt($(y).attr("class"));
        return vx - vy;
    });
    tr.append($(tds))
})