3

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>
user357034
  • 10,731
  • 19
  • 58
  • 72
  • 2
    your class names shouldn't start by a number... – pedrofalcaocosta Nov 06 '10 at 15:57
  • You should post some code -- we can help fix a problem, but you are asking us to write it for you. Hire a consultant to do that. – Hogan Nov 06 '10 at 16:00
  • 1
    is was an example I am just as fine with td1, td2 ,td3, td4 , etc.... – user357034 Nov 06 '10 at 16:00
  • No I was asking someone to point me in the right direction. If you have nothing useful to add it is best you don't respond at all – user357034 Nov 06 '10 at 16:02
  • @op you shouldn't have commented in such a harsh way, you should remember, helping you doesn't fetch any kinda income to people around this community, more over they are spending their precious time to help you... –  Nov 06 '10 at 16:07
  • 1
    Well many of us who come here for help are not as knowledgeable as others are and we come here for help, ideas and suggestions, that is how we learn the next time around. But we do not come here to be told hire someone, that is not a useful response. I will not learn anything from that response. I have learned a great deal from the responses where I have asked questions on Stack and I am grateful to those who have answered them. – user357034 Nov 06 '10 at 16:12
  • Actually, user 357034 is right - surely you wouldn't hire someone for a short snippet, and SO is exactly for this sort of questions. – Kobi Nov 06 '10 at 16:18
  • and a perfect example of something I just learned is "your class names shouldn't start by a number..." Thanks, now If I hired someone would I have found that out? – user357034 Nov 06 '10 at 16:20

6 Answers6

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/

Kobi
  • 135,331
  • 41
  • 252
  • 292
  • Safari has trouble with the return value of your `.sort()`. To make it work cross browser, you need to use `-` instead of `>`. As in: `return $(a).attr('class') - $(b).attr('class');` – user113716 Nov 06 '10 at 16:26
  • You don't actually need the `get()` function there – Yi Jiang Nov 06 '10 at 16:27
  • @Yi Jiang - I'm pretty sure I've had trouble with that in the past, I'll look into it. – Kobi Nov 06 '10 at 16:31
  • @patrick - Thanks, good to know. I choose `>` to compare it as strings, not by value. I guess I should use something similar to @galambalazs's answer. – Kobi Nov 06 '10 at 16:34
2

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.

Community
  • 1
  • 1
user113716
  • 318,772
  • 63
  • 451
  • 440
2

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.

hybernaut
  • 606
  • 4
  • 7
  • 1
    Yes, it's not browser code, just jQuery looking for a matching attribute named 'data-foo' when you look up data('foo'). See the 'HTML5' section here: http://api.jquery.com/data/ – hybernaut Nov 06 '10 at 19:09
1

Use the element sorter plugin, or see this question.

Community
  • 1
  • 1
Frédéric Hamidi
  • 258,201
  • 41
  • 486
  • 479
1

[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);
gblazex
  • 49,155
  • 12
  • 98
  • 91
0

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))
})
Collin
  • 1,431
  • 12
  • 19