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

Question

问题很简单，但出于某些原因，我找到答案并不是那么简单。

我想要做的就是对表格行的单元格进行排序 - 缺少更好的描述 - ＆＃39;水平＆＃39;而不是＆＃39;垂直＆＃39;。到目前为止，我发现的所有内容都涉及对单个列进行排序或基于列标题等进行排序。

没有标题，只有一个简单的表格。

<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>

然后在排序后，它应该如下所示：

<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>

如果答案已经存在（最好使用jQuery），有人可以指点我正确的方向吗？因为我无法找到它。

即使是tablesorter插件也只是对各列进行排序。

Answer 1

您可以创建元素数组，使用自定义排序方法对其进行排序（使用String.localeCompare比较文本内容），然后以正确的顺序将项目追加回父级。

$('#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>

---

正如 @ Karl-AndréGagnon指出的那样，这可以简化为

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

因为jQuery从.children()返回一个类似于数组的对象，该对象包含常规数组的本地.sort()方法。我个人不会使用这个版本，因为依赖于返回对象中包含的方法，而是使用$.makeArray()解决方案来创建一个肯定包含sort方法的本机数组。