javascript - 如何对单个表行中的值进行排序？ (即水平排序)

Question

这个问题很简单，但出于某种原因，对我来说找到答案并不是那么简单。

我想做的就是对表格行的单元格进行排序——因为缺少更好的描述——“水平”，而不是“垂直”。到目前为止，我发现的所有内容都涉及对单个列进行排序或根据列标题等进行排序。

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

<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() 返回一个类似数组的对象，其中包含常规数组的 native .sort() 方法。我个人不会使用这个版本，因为依赖于返回对象中包含的方法，而是使用 $.makeArray() 解决方案创建一个肯定包含排序的 native 数组方法。