根据表格数据对表格行进行排序 [英] Sort Table Rows according to table data

问题描述

例如，我有一个代码：

 < table> 
< tr> 
< th>名称< / td> 
< th>价格< / 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> 
  

我希望这样排序：

 <表> 
< tr> 
< th>名称< / td> 
< th>价格< / 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> 
  

我使用以下代码：

<$ p $函数sortNum（a，b）{
return 1 * $（a）.find（'。sort'）。text（）< 1 * $（b）.find（'。price'）。text（）？ 0：1;

函数sortTheTable（）{
$（function（）{
var elems = $ .makeArray（$（'tr：has（.price）'）。remove ））
elems.sort（sortNum）
$（'table＃information'）。append（$（elems））;
}）;
}

这有效，但问题是，输出如下所示： p>

 < table> 
< tr> 
< th>名称< / td> 
< th>价格< / 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> 
  

空的到顶​​部。

谢谢

解决方案

而不是

  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/

For example, I have a code:

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

I want this to be sorted like this:

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

I used this code:

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));
    });
}

this works but, the problem is, the output is like this:

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

The empty one goes to top. I want the empty ones in the bottom.

Thanks

解决方案

Instead of

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

insert

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

http://jsfiddle.net/E56j8/

这篇关于根据表格数据对表格行进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！