Javascript html表格排序函数工作不正常

Html表格排序工作不正常，我有一个演示在下面的链接。请关注列名称-行计数和sl.no

HTML:

---

您的值按文本排序。您应该将数值转换为int。使用

parseFloat

将字符串值转换为数值并排序

tr = tr.sort(function (a, b) { // sort rows
    str_a = a.cells[col].textContent.trim()
    str_b = b.cells[col].textContent.trim()
    val_a = parseFloat(str_a)
    val_b = parseFloat(str_b)

    if(!isNaN(val_a) && !isNaN(val_b)){
        var compar;
        if(val_a < val_b){
            compar = -1;
        }else if(val_a > val_b){
            compar = 1;
        }else{
            compar = 0;
        }
        return reverse*compar;
    }
    ...
  ...
...

tr=tr.sort（函数（a，b）{//sort行
str_a=a.cells[col].textContent.trim（）
str_b=b.cells[col].textContent.trim（）
val_a=parseFloat（str_a）
val_b=parseFloat（str_b）
如果（！isNaN（val_a）和&！isNaN（val_b））{
var比较；
if（val_aval_b）{
比较=1；
}否则{
比较=0；
}
返回反向*比较；
}
...
...
...

---

非常感谢，它工作得很好。还有一件事是如何将表示排序单击的上下箭头相加此演示太复杂了。简而言之：如果比较字符串，“5”将大于“12”，因为“5”>“1”。如果要对数字项进行正确排序，则应在比较之前将其转换为数字。感谢您的命令，了解如何在标题上添加上下箭头阅读有关css、类和jquery的详细信息。或查看更多演示。

function sortTable(table, col, reverse) {
    var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
        tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
        i;
    reverse = -((+reverse) || -1);
    tr = tr.sort(function (a, b) { // sort rows
        return reverse // `-1 *` if want opposite order
            * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
                .localeCompare(b.cells[col].textContent.trim())
               );
    });
    for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}

function makeSortable(table) {
    var th = table.tHead, i;
    th && (th = th.rows[0]) && (th = th.cells);
    if (th) i = th.length;
    else return; // if no `<thead>` then do nothing
    while (--i >= 0) (function (i) {
        var dir = 1;
        th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
    }(i));
}

function makeAllSortable(parent) {
    parent = parent || document.body;
    var t = parent.getElementsByTagName('table'), i = t.length;
    while (--i >= 0) makeSortable(t[i]);
}

window.onload = function () {makeAllSortable();};

table {width: 100%;font: 12px arial;}
th, td {min-width: 40px;text-align: center;}
th {font-weight: bold;cursor:pointer;}

tr = tr.sort(function (a, b) { // sort rows
    str_a = a.cells[col].textContent.trim()
    str_b = b.cells[col].textContent.trim()
    val_a = parseFloat(str_a)
    val_b = parseFloat(str_b)

    if(!isNaN(val_a) && !isNaN(val_b)){
        var compar;
        if(val_a < val_b){
            compar = -1;
        }else if(val_a > val_b){
            compar = 1;
        }else{
            compar = 0;
        }
        return reverse*compar;
    }
    ...
  ...
...