Javascript 单击表标题时对表中的行进行排序

我有一项任务，将表格中的表格行排序。表中的数据是日期、数字、字符串等所有数据的混合体

我浏览了很多链接，其中一些链接指向ready库。这对我没用。最后，我用所有的奶头和奶嘴做了很多我自己的东西。这只对数字有效

以下是脚本：

  $(document).ready(function () {

        //grab all header rows
        $('th').each(function (column) {
            $(this).addClass('sortable').click(function () {
                    var findSortKey = function ($cell) {
                        return $cell.find('.sort-key').text().toUpperCase()+ ' ' + $cell.text().toUpperCase();

                    };
                    var sortDirection = $(this).is('.sorted-asc') ? -1 : 1;
                    var $rows = $(this).parent().parent().parent().find('tbody tr').get();

                    //loop through all the rows and find
                    $.each($rows, function (index, row) {
                        row.sortKey = findSortKey($(row).children('td').eq(column));
                    });

                    //compare and sort the rows alphabetically or numerically
                    $rows.sort(function (a, b) {
                        if (a.sortKey.indexOf('-') == -1) {
                            if (parseInt(a.sortKey) < parseInt(b.sortKey)) {
                                return -sortDirection;
                            }
                            if (parseInt(a.sortKey) > parseInt(b.sortKey)) {                                
                                return sortDirection;
                            }
                        } else {
                            if (a.sortKey < b.sortKey) {
                                return -sortDirection;
                            }
                            if (a.sortKey > b.sortKey) {
                                return sortDirection;
                            }
                        }
                        return 0;
                    });

                    //add the rows in the correct order to the bottom of the table
                    $.each($rows, function (index, row) {
                        $('tbody').append(row);
                        row.sortKey = null;
                    });

                    //identify the column sort order
                    $('th').removeClass('sorted-asc sorted-desc');
                    var $sortHead = $('th').filter(':nth-child(' + (column + 1) + ')');
                    sortDirection == 1 ? $sortHead.addClass('sorted-asc') : $sortHead.addClass('sorted-desc');

                    //identify the column to be sorted by
                    $('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');
                });
            });
        });

$（文档）.ready（函数（）{
//抓取所有标题行
$（'th'）。每个（函数（列）{
$（this）.addClass（'sortable'）。单击（函数（）{
var findSortKey=函数（$cell）{
返回$cell.find（'.sort key'）.text（）.toUpperCase（）++'+$cell.text（）.toUpperCase（）；
};
var sortDirection=$（this）.is（'.sorted asc'）？-1:1；
var$rows=$（this.parent（）.parent（）.parent（）.find（'tbody tr'）.get（）；
//循环遍历所有行并找到
$.each（$行，函数（索引，行）{
row.sortKey=findSortKey（$（row）.children（'td'）.eq（column））；
});
//按字母或数字顺序对行进行比较和排序
$rows.sort（函数（a，b）{
if（a.sortKey.indexOf（'-'）=-1）{
if（parseInt（a.sortKey）parseInt（b.sortKey））{
返回排序方向；
}
}否则{
if（a.sortKeyb.sortKey）{
返回排序方向；
}
}
返回0；
});
//按正确的顺序将行添加到表的底部
$.each（$行，函数（索引，行）{
$（'tbody'）。追加（行）；
row.sortKey=null；
});
//标识列排序顺序
$（'th'）.removeClass（'sorted-asc sorted desc'）；
var$sortHead=$（'th'）.filter（'：第n个子（'+（列+1）+'））；
sortDirection==1？$sortHead.addClass（'sorted-asc'）：$sortHead.addClass（'sorted-desc'）；
//标识要排序的列
$（'td'）.removeClass（'sorted'）.filter（'：第n个子（'+（列+1）+'））.addClass（'sorted'）；
});
});
});

这是文档的样式：

    <style>
    root
    {
        display: block;
    }

    th.sortable
    {
        color: #666;
        cursor: pointer;
        text-decoration: underline;
    }

        th.sortable:hover
        {
            color: black;
        }

    th.sorted-asc, th.sorted-desc
    {
        color: black;
        background-color: cadetblue;
    }
</style>

根
{
显示：块；
}
可排序的
{
颜色：#666；
光标：指针；
文字装饰：下划线；
}
可排序：悬停
{
颜色：黑色；
}
th.SORDED-asc，th.SORDED-desc
{
颜色：黑色；
背景色：卡德蓝；
}

下面是HTML部分。

<table>
    <tbody>
        <tr>
            <th class="sortable">Name</th>
            <th class="sortable">Salary</th>
            <th>Extension</th>
            <th>Start date</th>
            <th>Start date (American)</th>
        </tr>
        <tr>
            <td>Bloggs, Fred</td>
            <td>$12000.00</td>
            <td>1353</td>
            <td>18/08/2003</td>
            <td>08/18/2003</td>
        </tr>
        <tr>
            <td>Turvey, Kevin</td>
            <td>$191200.00</td>
            <td>2342</td>
            <td>02/05/1979</td>
            <td>05/02/1979</td>
        </tr>
        <tr>
            <td>Mbogo, Arnold</td>
            <td>$32010.12</td>
            <td>2755</td>
            <td>09/08/1998</td>
            <td>08/09/1998</td>
        </tr>
        <tr>
            <td>Shakespeare, Bill</td>
            <td>$122000.00</td>
            <td>3211</td>
            <td>12/11/1961</td>
            <td>11/12/1961</td>
        </tr>
        <tr>
            <td>Shakespeare, Hamnet</td>
            <td>$9000</td>
            <td>9005</td>
            <td>01/01/2002</td>
            <td>01/01/2002</td>
        </tr>
        <tr>
            <td>Fitz, Marvin</td>
            <td>$3300</td>
            <td>5554</td>
            <td>22/05/1995</td>
            <td>05/22/1995</td>
        </tr>
    </tbody>
</table>

名称
薪水
延伸
开始日期
开始日期（美国）
布洛格斯，弗雷德
$12000.00
1353
18/08/2003
08/18/2003
特维，凯文
$191200.00
2342
02/05/1979
05/02/1979
姆博戈，阿诺德
$32010.12
2755
09/08/1998
08/09/1998
莎士比亚，比尔
$122000.00
3211
12/11/1961
11/12/1961
莎士比亚，哈姆内特
$9000
9005
01/01/2002
01/01/2002
菲茨，马文
$3300
5554
22/05/1995
05/22/1995

听起来像是家庭作业，这很好，因为你自己也付出了一些努力。如果不允许下载，我认为有一个调试版本，并查看代码。这应该对你的探索有所帮助

如果这是家庭作业，请记住，在现实世界中，编程的黄金法则是不要重新发明轮子。如果有满足您需求的插件，请使用它

修复您现有的内容

您的代码目前存在的问题是：

if (a.sortKey.indexOf('-') == -1) {
    if (parseInt(a.sortKey) < parseInt(b.sortKey)) {
        return -sortDirection;
     }

     if (parseInt(a.sortKey) > parseInt(b.sortKey)) {                                
          return sortDirection;
     }
} else {
    //Non numeric sort
}

这是一张工作票

---

请记住，这是一个非常粗略的计算检查，您可能需要对其他数据类型进行其他检查和平衡

这里有一把小提琴，如果有人想用叉子的话，我过去经常用它。你查过了吗？如果是这样的话，它如何不能满足您的需求呢？Hi@JonP，问题是它使用了其站点“jquery.tablesorter.js”中的Lib，这是不允许的。我需要自己编写代码或框架。所以唯一的选择就是编辑我自己的代码。

if (a.sortKey.indexOf('-') == -1 && (!isNaN(a.sortKey) && !isNaN(a.sortKey))) {
//Rough Numeracy check                          

    if (parseInt(a.sortKey) < parseInt(b.sortKey)) {
        return -sortDirection;
    }

    if (parseInt(a.sortKey) > parseInt(b.sortKey)) {                                
        return sortDirection;
    }

 } else {
    //Non numeric sort
 }