使用javascript或jquery根据表头列对表行进行排序

我有类似的东西

S.L。
名称
1.
罗纳尔多
2.
梅西
3.
里贝里
4.
包

我想要的是，当单击

th

时，根据单击的以下

th

按升序和降序交替排序

因此，如果有人单击了

S.L

th

，那么它会在 每次单击时交替降序和升序

单击

Name

th

时，应以降序显示名称 顺序，然后升序，其各自的顺序不变

S.L

---

下面是

您可以使用jQuery DataTables插件以所需的方式应用列排序

---

您可能想查看此页面：

我想你可以这样做：

演示：

HTML:

S.L。
名称
....

JS:

//排序表（f，n）
//f:1升序，-1降序
//n:n的第n个子项（）
函数可排序（f，n）{
var rows=$（'#mytable tbody tr'）.get（）；
行排序（函数（a，b）{
var A=getVal（A）；
var B=getVal（B）；
if（AB）{
返回1*f；
}
返回0；
});
函数getVal（elm）{
var v=$（elm）.children（'td'）.eq（n）.text（）.toUpperCase（）；
如果（$.isNumeric（v））{
v=parseInt（v，10）；
}
返回v；
}
$.each（行，函数（索引，行）{
$（“#mytable”）.children（'tbody'）.append（行）；
});
}
var f_sl=1；//切换排序顺序的标志
var f_nm=1；//切换排序顺序的标志
$（“#sl”）。单击（函数（）{
f_sl*=-1；//切换排序顺序
var n=$（this.prevAll（）.length；
可排序（f_sl，n）；
});
$（“#nm”）。单击（函数（）{
f_nm*=-1；//切换排序顺序
var n=$（this.prevAll（）.length；
可排序（f_nm，n）；
});

---

希望这能有所帮助。

提供一个交互式排序处理多列并不是一件小事

除非您想为多行单击、编辑和刷新页面内容、管理大型表的排序算法编写大量代码处理逻辑，否则最好采用插件

，（由莫蒂更新）是我的最爱。它很容易上手，而且非常可定制。只需将类

tablesorter

添加到要排序的表中，然后在文档加载事件中调用tablesorter插件：

$(function(){
    $("#myTable").tablesorter();
});

---

您可以浏览以了解高级功能。

使用Javascriptsort（）函数

var$tbody=$（'table tbody'）；
$tbody.find（'tr'）.sort（函数（a，b）{
var tda=$（a）.find（'td:eq（1）'）.text（）；//可以用要排序的列替换1
var tdb=$（b）.find（'td:eq（1）'）.text（）；//这将在第二列上排序
//如果ab，则返回-1
：tda>tdb？-1
//否则它们相等-返回0
: 0;           
}).附件（$t正文）；

---

如果你想提升，你只需要反转>和我想这可能会对你有所帮助：
以下是：

代码如下：

var stIsIE=/*@cc_on！@*/虚假的；
排序表={
init:function（）{
if（arguments.callee.done）返回；
arguments.callee.done=true；
如果（_定时器）清除间隔（_定时器）；
如果（！document.createElement | |！document.getElementsByTagName）返回；
sorttable.DATE\u RE=/^（\d\d？[\/\.-]（\d\d？[\/\.-]（\d\d）？\d\d）$/；
forEach（document.getElementsByTagName（'table'）、函数（table）{
if（table.className.search（/\bsortable\b/）！=-1）{
sorttable.makeSortable（表）；
}
});
},
makeSortable：函数（表）{
if（table.getElementsByTagName（'thead'）。长度==0）{
=document.createElement（'thead'）；
.appendChild（table.rows[0]）；
table.insertBefore（表，table.firstChild）；
}
if（table.tHead==null）table.tHead=table.getElementsByTagName（'tHead'）[0]；
如果（table.tHead.rows.length！=1）返回；
sortbottomrows=[]；
对于（var i=0；i//  sortTable(f,n)
//  f : 1 ascending order, -1 descending order
//  n : n-th child(<td>) of <tr>
function sortTable(f,n){
    var rows = $('#mytable tbody  tr').get();

    rows.sort(function(a, b) {

        var A = getVal(a);
        var B = getVal(b);

        if(A < B) {
            return -1*f;
        }
        if(A > B) {
            return 1*f;
        }
        return 0;
    });

    function getVal(elm){
        var v = $(elm).children('td').eq(n).text().toUpperCase();
        if($.isNumeric(v)){
            v = parseInt(v,10);
        }
        return v;
    }

    $.each(rows, function(index, row) {
        $('#mytable').children('tbody').append(row);
    });
}
var f_sl = 1; // flag to toggle the sorting order
var f_nm = 1; // flag to toggle the sorting order
$("#sl").click(function(){
    f_sl *= -1; // toggle the sorting order
    var n = $(this).prevAll().length;
    sortTable(f_sl,n);
});
$("#nm").click(function(){
    f_nm *= -1; // toggle the sorting order
    var n = $(this).prevAll().length;
    sortTable(f_nm,n);
});

$(function(){
    $("#myTable").tablesorter();
});

function sorttable(table) {
    var context = $('#' + table), tbody = $('#' + table + ' tbody'), sortfield = $(context).data('sort-attribute'), c, dir = $(context).data('sort-direction'), index = $(context).find('thead th[data-column="' + sortfield + '"]').index();
    if (!sortfield) {
        sortfield = $(context).data('id-attribute');
    };
    switch (dir) {
        case "asc":
            tbody.find('tr').sort(function (a, b) {
                var sortvala = parseFloat($(a).find('td:eq(' + index + ')').text());
                var sortvalb = parseFloat($(b).find('td:eq(' + index + ')').text());
                // if a < b return 1
                return sortvala < sortvalb ? 1
                       // else if a > b return -1
                       : sortvala > sortvalb ? -1
                       // else they are equal - return 0    
                       : 0;
            }).appendTo(tbody);
            break;
        case "desc":
        default:
            tbody.find('tr').sort(function (a, b) {
                var sortvala = parseFloat($(a).find('td:eq(' + index + ')').text());
                var sortvalb = parseFloat($(b).find('td:eq(' + index + ')').text());
                // if a < b return 1
                return sortvala > sortvalb ? 1
                       // else if a > b return -1
                       : sortvala < sortvalb ? -1
                       // else they are equal - return 0    
                       : 0;
            }).appendTo(tbody);
        break;
  }

//taken from StackOverflow:
//https://stackoverflow.com/questions/3880615/how-can-i-determine-whether-a-given-string-represents-a-date
function isDate(val) {
    var d = new Date(val);
    return !isNaN(d.valueOf());
}

var getVal = function(elm, n){
  var v = $(elm).children('td').eq(n).text().toUpperCase();
  if($.isNumeric(v)){
    v = parseFloat(v,10);
    return v;
  }
  if (isDate(v)) {
    v = new Date(v);
    return v;
  }
  return v;
}