Question

I have a thead like this:

<thead>
   <tr>
     <th rowspan="2">Cell-1</th>
     <th rowspan="2">Cell-2</th>        
     <th colspan="3">Header</th>
     <th rowspan="2">Cell-6</th>
   </tr>
   <tr>
     <th">Cell-3</th>
     <th">Cell-4</th>
     <th">Cell-5</th>
   </tr>
</thead>

I need to create a jquery selector with the cells in their correct order 1-2-3-4-5-6. Right now my selector looks like this:

hdrCols = thead.find( "tr:first th[rowspan=2], TR:first TH[rowspan=2]").add( thead.find( "tr:last-child th, TR:last-child TH" ) );

This gives me 1-2-6-3-4-5 and breaks my layout.

Is there a way to create a selector, which gets cells in their correct order? I cannot move the columns around, so any solution would have to encompass that.

Answer 1

Try simply using JavaScripts sort() function. Like this: http://jsfiddle.net/6wYQt/

function sortHeaders(a, b) {
    var x = $(a).text().toLowerCase();
    var y = $(b).text().toLowerCase();

    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}

thead   = $('thead');
hdrCols = thead.find( "tr:first th[rowspan=2], TR:first TH[rowspan=2]").add( thead.find( "tr:last-child th, TR:last-child TH" ) );

hdrCols.sort(sortHeaders);

console.log(hdrCols);
​