只是重新审视一个旧的解决方案，我想我会在它的 ~ 5 周年纪念日给它改头换面！

• 纯 Javascript (ES6)
• 字母和数字排序 - 升序和降序
• 适用于Chrome、Firefox、Safari（和IE11，见下文）

快速解释

1. click向所有标题 ( th) 单元格添加一个事件...
2. 对于当前table，查找所有行（第一行除外）...
3. 根据单击的列的值对行进行排序...
4. 按新顺序将行插入回表中。

const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

const comparer = (idx, asc) => (a, b) => ((v1, v2) => 
    v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

// do the work...
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
    const table = th.closest('table');
    Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
        .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
        .forEach(tr => table.appendChild(tr) );
})));

table, th, td {
    border: 1px solid black;
}
th {
    cursor: pointer;
}

<table>
    <tr><th>Country</th><th>Date</th><th>Size</th></tr>
    <tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr>
    <tr><td><a href=#>spain</a></td><td><i>2005-05-05</i></td><td></td></tr>
    <tr><td><b>Lebanon</b></td><td><a href=#>2002-02-02</a></td><td><b>-17</b></td></tr>
    <tr><td><i>Argentina</i></td><td>2005-04-04</td><td><a href=#>100</a></td></tr>
    <tr><td>USA</td><td></td><td>-6</td></tr>
</table>

IE11 支持（非 ES6）

如果你想支持IE11，你需要沟ES6语法和使用替代品Array.from和Element.closest。

IE

var getCellValue = function(tr, idx){ return tr.children[idx].innerText || tr.children[idx].textContent; }

var comparer = function(idx, asc) { return function(a, b) { return function(v1, v2) {
        return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2);
    }(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}};

// do the work...
Array.prototype.slice.call(document.querySelectorAll('th')).forEach(function(th) { th.addEventListener('click', function() {
        var table = th.parentNode
        while(table.tagName.toUpperCase() != 'TABLE') table = table.parentNode;
        Array.prototype.slice.call(table.querySelectorAll('tr:nth-child(n+2)'))
            .sort(comparer(Array.prototype.slice.call(th.parentNode.children).indexOf(th), this.asc = !this.asc))
            .forEach(function(tr) { table.appendChild(tr) });
    })
});

比较器功能分解

为简洁起见，我压缩了该comparer()函数。它有点复杂/难以阅读，所以在这里再次爆炸/格式化/评论。

// Returns a function responsible for sorting a specific column index 
// (idx = columnIndex, asc = ascending order?).
var comparer = function(idx, asc) { 

    // This is used by the array.sort() function...
    return function(a, b) { 

        // This is a transient function, that is called straight away. 
        // It allows passing in different order of args, based on 
        // the ascending/descending order.
        return function(v1, v2) {

            // sort based on a numeric or localeCompare, based on type...
            return (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2)) 
                ? v1 - v2 
                : v1.toString().localeCompare(v2);
        }(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
    }
};

我写了一些代码，可以按行对表格进行排序，假设只有一个<tbody>并且单元格没有colspan。

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
}
// sortTable(tableNode, columId, false);

如果您不想做出上述假设，则需要考虑您希望在每种情况下的行为方式。（例如，将所有内容合二为一<tbody>或将所有前面的colspan值相加等）

然后您可以将其附加到您的每个表格中，例如假设标题在 <thead>

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]);
}

然后调用makeAllSortable onload。

它在桌子上工作的示例小提琴。

Nick Grealy 接受的答案很好，但如果您的行在<tbody>标签内，则行为有点古怪（第一行从未排序，排序后行最终在 tbody 标签之外，可能会丢失格式）。

这是一个简单的修复，但是：

只是改变：

document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
  const table = th.closest('table');
  Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
    .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
    .forEach(tr => table.appendChild(tr) );

到：

document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
  const table = th.closest('table');
  const tbody = table.querySelector('tbody');
  Array.from(tbody.querySelectorAll('tr'))
    .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
    .forEach(tr => tbody.appendChild(tr) );

它所做的不仅仅是“排序”，而是 dataTables.net 可以满足您的需求。我每天都使用它并且得到很好的支持并且非常快（确实需要 jQuery）

http://datatables.net/

DataTables 是 jQuery Javascript 库的插件。它是一个高度灵活的工具，基于渐进增强的基础，它将向任何 HTML 表格添加高级交互控件。

Google Visualizations 是另一种选择，但需要比 dataTables 多一点的设置，但不需要任何特定的框架/库（google.visualizations 除外）：

http://code.google.com/apis/ajax/playground/?type=visualization#table

还有其他选择...尤其是如果您使用其他 JS 框架之一。Dojo、Prototype 等都有可用的“表格增强”插件，提供最少的表格排序功能。许多提供了更多，但我会重申......我还没有遇到过像 datatables.net 一样强大和快速的。

我知道使用 javascript 对 HTML 表进行排序的最佳方法是使用以下函数。

只需将您要排序的表的 id 和行上的列号传递给它。它假设您正在排序的列是数字或其中有数字，并且会进行正则表达式替换以获取数字本身（非常适合货币和其他带有符号的数字）。

function sortTable(table_id, sortColumn){
    var tableData = document.getElementById(table_id).getElementsByTagName('tbody').item(0);
    var rowData = tableData.getElementsByTagName('tr');            
    for(var i = 0; i < rowData.length - 1; i++){
        for(var j = 0; j < rowData.length - (i + 1); j++){
            if(Number(rowData.item(j).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, "")) < Number(rowData.item(j+1).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\.]+/g, ""))){
                tableData.insertBefore(rowData.item(j+1),rowData.item(j));
            }
        }
    }
}

使用示例：

$(function(){
    // pass the id and the <td> place you want to sort by (td counts from 0)
    sortTable('table_id', 3);
});