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

本文介绍了根据表格数据对表格行进行排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 例如，我有一个代码：

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

jsfiddle/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;

jsfiddle/E56j8/