如何从最大数量到最小数量对此表进行排序?

时间:2018-05-12 15:16:11

标签: javascript jquery sorting

尝试通过" rankcore"对下表进行排序td从最大数到最小数。

<html>
    <head>
        <script src="js/jquery-1.12.3.min.js"></script>
    </head>
    <body>
<h4>Current Rank</h4>
<table id="rank">
    <tbody>
        <tr>
            <td class="namecell">Joe:</td>
            <td class="rankscore">7</td>
        </tr>
        <tr>
            <td class="namecell">Jim:</td>
            <td class="rankscore">13</td>
        </tr>
        <tr>
            <td class="namecell">Megan:</td>
            <td class="rankscore">936</td>
        </tr>
        <tr>
            <td class="namecell">Greg:</td>
            <td class="rankscore">13</td>
        </tr>
        <tr>
            <td class="namecell">Will:</td>
            <td class="rankscore">20</td>
        </tr>
        <tr>
            <td class="namecell">Paul:</td>
            <td class="rankscore">15</td>
        </tr>
        <tr>
            <td class="namecell">Tammy:</td>
            <td class="rankscore">133</td>
        </tr>
        <tr>
            <td class="namecell">Chari:</td>
            <td class="rankscore">123</td>
        </tr>
        <tr>
            <td class="namecell">Ed:</td>
            <td class="rankscore">6</td>
        </tr>
        <tr>
            <td class="namecell">Hank:</td>
            <td class="rankscore">13</td>
        </tr>
        <tr>
            <td class="namecell">Bill:</td>
            <td class="rankscore">13</td>
        </tr>
        <tr>
            <td class="namecell">Al:</td>
            <td class="rankscore">21</td>
        </tr>
        <tr>
            <td class="namecell">Stacy:</td>
            <td class="rankscore">13</td>
        </tr>
        <tr>
            <td class="namecell">Mack:</td>
            <td class="rankscore">13</td>
        </tr>
        <tr>
            <td class="namecell">Ira:</td>
            <td class="rankscore">13</td>
        </tr>
        <tr></tr>
    </tbody>
</table>
</body>

<script>
function sortTable(table, order) {
    var asc   = order === 'asc',
        tbody = table.find('tbody');

    tbody.find('tr').sort(function(a, b) {
        if (asc) {
            return $('td.rankscore', a).text().localeCompare($('td.rankscore', b).text());
        } else {
            return $('td.rankscore', b).text().localeCompare($('td.rankscore', a).text());
        }
    }).appendTo(tbody);
}

sortTable($('#rank'), 'desc');
</script>

</html>

当前代码结果如下表所示:

Megan:  936
Joe:    7
Ed:     6
Al:     21
Will:   20
Paul:   15
Tammy:  133
Hank:   13
Jim:    13
Greg:   13
Bill:   13
Ira:    13
Stacy:  13
Mack:   13
Chari:  123

该功能似乎只是在排序时查看第一个数字,而不是考虑所有数字。

我没有写这个排序功能,我很难弄清楚它到底在做什么。我查了一个解释localCompare的页面,但它并没有多大帮助。

1 个答案:

答案 0 :(得分:0)

您获得的分数按字符串顺序排序,而不是按数字顺序排序。您需要将文本转换为数字,然后根据需要与<><=等进行比较。

你需要这样的东西:

    const aNum = parseInt($('td.rankscore', a).text());
    const bNum = parseInt($('td.rankscore', a).text());

    if (asc) {
        return (aNum === bNum ? 0 : (aNum < bNum ? -1 : 1);
    } else {
        return (aNum === bNum ? 0 : (aNum > bNum ? -1 : 1);
    }

我没有测试过这个,我可能有&lt;和&gt;向后,但这是基本的想法。