根据表格数据对表格行进行排序答案

【问题标题】：Sort Table Rows according to table data根据表格数据对表格行进行排序
【发布时间】：2012-06-20 09:28:46
【问题描述】：

例如，我有一个代码：

<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>c</td>
        <td class="sort">8</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort"></td>
    </tr>
    <tr>
        <td>h</td>
        <td class="sort">2</td>
    </tr>
    <tr>
        <td>p</td>
        <td class="sort">6</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort"></td>
    </tr>
</table>

我希望这样排序：

<table>
    <tr>
        <th>name</td>
        <th>price</td>
    </tr>
    <tr>
        <td>h</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>p</td>
        <td class="sort">6</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort">8</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort"></td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort"></td>
    </tr>
</table>

我使用了这个代码：

function sortNum(a, b) {
    return 1 * $(a).find('.sort').text() < 1 * $(b).find('.price').text() ? 0 : 1;
}
function sortTheTable(){
    $(function() {
        var elems = $.makeArray($('tr:has(.price)').remove())
        elems.sort(sortNum)
        $('table#information').append($(elems));
    });
}

这可行，但问题是，输出是这样的：

<table>
    <tr>
        <th>name</td>
        <th>price</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort"></td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort"></td>
    </tr>
    <tr>
        <td>h</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>p</td>
        <td class="sort">6</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort">8</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20</td>
    </tr>
</table>

空的到顶部。我想要底部的空的。

谢谢

【问题讨论】：

那么你为什么不更新你的sortNum() 函数来改变空白的行为呢？另外，请注意，即使忽略空值的行为，您的 sortNum() 也是错误的，因为 .sort() 比较函数应该返回小于等于的负数、大于等于的正数或等于的零（但您的返回只有 0 或 1)。当你的 html 中没有出现这样的类时，你正在使用 .find('.price')。
查看jsfiddle.net/joycse06/YZcQD

标签： javascript jquery html

【解决方案1】：

代替

return 1 * $(a).find('.sort').text() < 1 * $(b).find('.sort').text() ? 1 : 0;

插入

return 1 * $(a).find('.sort').text() < 1 * $(b).find('.price').text() ? 0 : 1;

http://jsfiddle.net/E56j8/

【讨论】：

【解决方案2】：

您有许多插件可以对其进行排序，为什么要重新发明轮子。这是一个这样的插件

Link

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 

$("#myTable").tablesorter();

【讨论】：

【解决方案3】：

看看Sorting - we're doing it wrong。 here 提供了一个简单的用于排序的 jQuery 插件。

关于您的代码的一些注释：

// you're binding a document ready event within a function call? 
// looks the wrong way 'round, to me
function sortTheTable(){
    $(function() {
        // 1) you probably want to use .detach() over .remove()
        // 2) "tr:has(.price)" will match ALL table rows 
        // containing an element with the class .price
        // even if they're children of different <table>s!
        // 3) $('.selector') is already "an array", at least it's sortable right away.
        // there's no need for $.makeArray() here
        var elems = $.makeArray($('tr:has(.price)').remove())
        elems.sort(sortNum)
        // "#information" is a sufficient (and more efficient) selector, 
        $('table#information').append($(elems));
    });
}

【讨论】：