Question

假设我有这样的代码：

<table>
    <tr>
        <th>name</td>
        <th>price</td>
    </tr>
    <tr>
        <td>a</td>
        <td class="sort">5</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">3</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">8</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">2</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">6</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20</td>
    </tr>
</table>

但应该这样安排：

<table>
    <tr>
        <th>name</td>
        <th>price</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">2</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">3</td>
    </tr>
    <tr>
        <td>a</td>
        <td class="sort">5</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">6</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">8</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20</td>
    </tr>
</table>

根据表格数据排列表格数据。注意：该类将定义为class="sort"

提前致谢

更新：

我希望在不点击用户的情况下安排表格。

Answer 1

好吧，看起来你没有尝试任何东西，因为缺少代码而且你没有告诉我们你是如何生成页面/表格的（问题似乎要求我们为你做的工作而不是帮助）但请看一下：http://datatables.net/它可以为您提供所需的解决方案。

Answer 2

通过使用$.makeArray将行转换为数组，您可以在数组上使用本机javascript sort()。因为看似适用，我对数字进行了排序

DEMO：http://jsfiddle.net/3MBPF/

function sortNum(a, b) {
   return 1 * $(a).find('.sort').text() < 1 * $(b).find('.sort').text() ? 0 : 1;
}

$(function() {
    var elems = $.makeArray($('tr:has(.sort)').remove())
    elems.sort(sortNum)
    $('table').append($(elems));
});

Answer 3

您可以使用http://tinysort.sjeiti.com/提供的jQuery Tinysort插件。这应该涵盖您的大部分排序需求。

使用javascript在表数据的基础上排列表行

3 个答案: