All geek questions in one place

Reorder td by class

I will try to explain this as best as possible, so here goes ...

I have several tags <tr>, each of which has class = "one" or class = "two", etc.

Here is the code. I added a class to each of them through jQuery, since I do not have direct access to the markup.

What I want to do is rearrange the full td tag and all its contents in class order. So class = "1" td will be first, class = "2" seconds 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>
+3
source share
6 answers

I am using the jQuery table sorter (http://tablesorter.com/docs/)-- can you use this plugin to accomplish what you need, or learn to read code.

, @petersenDidit: , jQuery 1.4.3 HTML5, data()? . , ( ) :

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

- , , , .

+2

<tr> get sort . append, , <table> ( each):

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

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

+2

, , <tr>, , <td>.

<tr>, :

(, <table> myTable, tr tr_.)

  var $tbody = $('#myTable > tbody');   // cache reference to the table 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: , table <tbody>. , <tbody> .

: .get() DOM @Kobi , sort , , .

+2

.

+1

[ ]

(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);
+1

, tr, tds, , , 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))
})
0
source

Source: https://habr.com/ru/post/1773396/

More articles:


All Articles