如何在单个表格行中对值进行排序？ （即水平排序）

Question

The question is simple but for some reason, wasn't so simple for me finding an answer.

All I want to do is sort the cells of a table row - for lack of a better description - 'horizontally', not 'vertically'. Everything I've found so far deals with sorting individual columns or sorting based on column headers etc.

There are no headers, just a simple table such as this.

<table id="t1">
    <tr>
        <td>Sample-N</td>
        <td>Sample-W</td>
        <td>Sample-A</td>
        <td>Sample-K</td>
    </tr>
    <tr>
        <td>Sample-S</td>
        <td>Sample-U</td>
        <td>Sample-J</td>
        <td>Sample-M</td>
    </tr>
    <tr>
        <td>Sample-O</td>
        <td>Sample-E</td>
        <td>Sample-L</td>
        <td>Sample-B</td>
    </tr>
</table>

Then after sorting, it should appear like this:

<table id="t1">
    <tr>
        <td>Sample-A</td>
        <td>Sample-K</td>
        <td>Sample-N</td>
        <td>Sample-W</td>
    </tr>
    <tr>
        <td>Sample-J</td>
        <td>Sample-M</td>
        <td>Sample-S</td>
        <td>Sample-U</td>
    </tr>
    <tr>
        <td>Sample-B</td>
        <td>Sample-E</td>
        <td>Sample-L</td>
        <td>Sample-O</td>
    </tr>
</table>

If an answer already exists (preferably using jQuery), can someone please point me in the right direction? Because I can't find it.

Even the tablesorter plug-in only seems to sort individual columns.

Answer 1

You can make an array of the elements, sort them with a custom sorting method (using String.localeCompare to compare the text contents) then append the items back into their parent in the correct order.

 $('#t1 tr').each(function(){ var $tr = $(this), $tds = $tr.children(), tdArray = $.makeArray($tds); tdArray.sort(function(a, b){ return $(a).text().localeCompare($(b).text()); }); $.each(tdArray,function(i, el){ $(el).appendTo($tr); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="t1"> <tr> <td>Sample-N</td> <td>Sample-W</td> <td>Sample-A</td> <td>Sample-K</td> </tr> <tr> <td>Sample-S</td> <td>Sample-U</td> <td>Sample-J</td> <td>Sample-M</td> </tr> <tr> <td>Sample-O</td> <td>Sample-E</td> <td>Sample-L</td> <td>Sample-B</td> </tr> </table> 

---

As @Karl-André Gagnon points out, this can be shortened to just

$('#t1 tr').each(function(){
    $(this).children().sort(function(a, b){
        return $(a).text().localeCompare($(b).text());
    }).appendTo(this);
});

because jQuery returns an array-like object from .children() that contains the native .sort() method of a regular array. I would personally not use this version due to relying on that method being included in the returned object, and instead go with the $.makeArray() solution that creates a native array which is sure to contain the sort method.