1

假设我有这样的代码：

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

提前致谢

更新：

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

4

3 回答 3

1

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

演示：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));
});
于 2012-06-16T16:40:55.653 回答
1

好吧，由于缺少代码，您似乎没有尝试过任何事情，并且您还没有告诉我们您是如何生成页面/表格的（这个问题似乎要求我们为您完成工作而不是帮助）但是采取看看这个：http ://datatables.net/它可能会给你你想要的解决方案。

于 2012-06-16T15:39:26.103 回答
0

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

于 2012-06-16T15:40:54.103 回答