JQuery在没有插件的情况下对表进行排序
是否有一个jquery函数来排序表。 我知道JQuery Tablesorter插件，但我想尽可能避免使用它。
作为一个FYI – 我有一个表头，其中包含自定义图像以表示升序和降序。 数据类型几乎可以是任何类型。
编辑：我可以在Javascript中对表进行排序吗？
这是非常可能的。 你可以这样做
function sortTable(table, col, reverse) { var tb = table.tBodies[0], // use `` to ignore `` and `` 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 `` 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();}; 看看这个小提琴
（我不是上面代码的作者或那个小提琴，我只是在搜索解决方案时找到它。）
Javascript大师Stuart Langridge有一个很好的替代方法，使用名为tablesorter.js的jQuery
http://www.kryogenix.org/code/browser/sorttable/
我之前用过它; 效果很好而且非常轻巧。
我不得不稍微改变排序function，所以它会忽略非数字字符，希望这会节省一些人的时间….
function sortTable(table, col, reverse) { var tb = table.tBodies[0], // use `` to ignore `` and `` 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 * (Number(a.cells[col].textContent.replace(/[^\d.-]/g, '')) - Number(b.cells[col].textContent.replace(/[^\d.-]/g, ''))); }); for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order }
对于小桌子，我这样做……
sortTable = function(tableName, rowClass, columnNumber, ascending) { var row, cell, cellContent; var comparisonRow, comparisonCell, comparisonContent; $("#" + tableName + " tr." + rowClass).each(function(i) { row = $("#" + tableName + " tr." + rowClass + ":eq(" + i + ")"); cell = $(row).find("td:eq(" + columnNumber + ")"); cellContent = $(cell).html(); $("#" + tableName + " tr." + rowClass).each(function(j) { comparisonRow = $("#" + tableName + " tr." + rowClass + ":eq(" + j + ")"); comparisonCell = $(comparisonRow).find("td:eq(" + columnNumber + ")"); comparisonContent = $(comparisonCell).html(); if ( (ascending && cellContent < comparisonContent) || (!ascending && cellContent > comparisonContent) ) { $(row).insertBefore(comparisonRow); return false; } }); }); };
说明：该函数遍历指定表的每一行（指定类的一行），记录HTML内容（来自指定列的单元格），然后遍历所有表格的行，比较单元格内容（再次来自指定的列）。 当单元格内容小于或大于（基于“升序”是否设置为真）时，该行被插入到被比较的行的前面。
一个样本电话会是……
sortTable("sample_table", "data_row", 0, true);
…这将基于第一列中的单元格（即列索引0）按升序对名为“sample table”的表内的类“data_row”进行排序。
对于较大的表和附加function，我使用…
- 数据表
在框中，我发现DataTables比TableSorter更容易使用（例如，除非您需要，否则无需引用或合并其他CSS和图稿），并且文档非常好。 我也喜欢默认function（例如，它的搜索function）。
https://www.w3schools.com/howto/howto_js_sort_table.asp
function sortTable() { var table, rows, switching, i, x, y, shouldSwitch; table = document.getElementById("myTable"); switching = true; /* Make a loop that will continue until no switching has been done: */ while (switching) { // Start by saying: no switching is done: switching = false; rows = table.rows; /* Loop through all table rows (except the first, which contains table headers): */ for (i = 1; i < (rows.length - 1); i++) { // Start by saying there should be no switching: shouldSwitch = false; /* Get the two elements you want to compare, one from current row and one from the next: */ x = rows[i].getElementsByTagName("TD")[0]; y = rows[i + 1].getElementsByTagName("TD")[0]; // Check if the two rows should switch place: if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { // If so, mark as a switch and break the loop: shouldSwitch = true; break; } } if (shouldSwitch) { /* If a switch has been marked, make the switch and mark that a switch has been done: */ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; } } }