如何按rankscore列从大到小正确排序HTML表格？

我懂你遇到的麻烦了——你现在用localeCompare对分数做字符串比较，这会导致数字按字典顺序排序，而不是我们需要的数值大小排序。举个例子，字符串"133"和"15"比较时，第二个字符"3"比"5"小，所以程序会认为133比15小，这就是排序出错的原因。

修正方案：改用数值比较 #

我们只需要把td.rankscore里的文本转换成数字，然后通过数值减法来完成排序逻辑，这样就能得到正确的大小排序了。

修改后的sortTable函数如下：

function sortTable(table, order) {
  var asc = order === 'asc',
      tbody = table.find('tbody');
  
  tbody.find('tr').sort(function(a, b) {
    // 把文本转换成整数（如果是小数可以用parseFloat）
    var scoreA = parseInt($('td.rankscore', a).text(), 10);
    var scoreB = parseInt($('td.rankscore', b).text(), 10);
    
    if (asc) {
      // 升序：a的分数减b的分数，小的在前
      return scoreA - scoreB;
    } else {
      // 降序：b的分数减a的分数，大的在前
      return scoreB - scoreA;
    }
  }).appendTo(tbody);
}

sortTable($('#rank'), 'desc');

代码解释 #

• parseInt(text, 10)：把单元格里的文本转换成十进制整数，确保我们是在比较数值而不是字符串。如果你的分数可能包含小数，可以换成parseFloat。
• 排序函数返回值：当返回负数时，a会排在b前面；返回正数时，b排在a前面；返回0则顺序不变。用数值减法正好完美匹配这个规则，升序用scoreA - scoreB，降序用scoreB - scoreA。

替换你原来的sortTable函数后，表格就能按分数从大到小正确排序了，133会排在15前面，所有数值都会按照真实大小排列。

内容的提问来源于stack exchange，提问作者Just a Sec User