根据表格数据排序表格行

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

空的应该放在底部。我希望空的元素在最后面。

谢谢。

- LIGHT

---

那么为什么不更新您的sortNum()函数以便在处理空白时表现不同呢？另外，请注意，即使忽略空值的行为，您的sortNum()也是错误的，因为.sort()比较函数应该返回负数表示小于，正数表示大于，或者零表示相等（但是您的函数只返回0或1）。而且，您在html中没有出现.find('.price')这样的类。 - nnnnnn

请查看此链接：http://jsfiddle.net/joycse06/YZcQD/ - Prasenjit Kumar Nag

Answer 1

您有很多插件可以用来排序，为什么要重复造轮子呢？这里有一个这样的插件。 链接

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

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

- Ankur Verma

Answer 2

与其

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/

- Goldie

Answer 3

看一下排序 - 我们做错了。这里有一个用于排序的简单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));
    });
}

- rodneyrehm