使用JavaScript对HTML表进行排序

Question

我正在使用表格排序解决方案(在JavaScript中),但我似乎找不到合适的解决方案.我只需要按字母顺序对每列进行排序.它不需要忽略任何代码或任何数字或使用货币.只需单击列标题即可从排序的z/za中切换它.

有谁知道这样一个非常简单的解决方案？

Answer 1

只是重新考虑一个旧的解决方案,我想我会为它的5周年纪念日改头换面!

• 普通的Javascript(ES6)
• alpha和数字排序 - 升序和降序
• 适用于Chrome,Firefox,Safari(以及IE11,见下文)

快速解释

1. click向所有header(th)单元格添加一个事件......
   1. 对于当前table,找到所有行(除了第一行)...
   2. 根据单击列的值对行进行排序...
   3. 按新顺序将行插回到表中.

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语法和添加polyfills为Array.from,Element.closest和click.

即

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

Answer 2

我编写了一些代码,它们会逐行对表进行排序,假设只有一行,<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.

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

Answer 3

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

Answer 4

使用 :hover 箭头效果进行表格排序。只需将类添加到要排序的每列的元素.order中<th>

\n

\r\n

\r\n

function table_sort() {\n  const styleSheet = document.createElement(\'style\')\n  styleSheet.innerHTML = `\n        .order-inactive span {\n            visibility:hidden;\n        }\n        .order-inactive:hover span {\n            visibility:visible;\n        }\n        .order-active span {\n            visibility: visible;\n        }\n    `\n  document.head.appendChild(styleSheet)\n\n  document.querySelectorAll(\'th.order\').forEach(th_elem => {\n    let asc = true\n    const span_elem = document.createElement(\'span\')\n    span_elem.style = "font-size:0.8rem; margin-left:0.5rem"\n    span_elem.innerHTML = "\xe2\x96\xbc"\n    th_elem.appendChild(span_elem)\n    th_elem.classList.add(\'order-inactive\')\n\n    const index = Array.from(th_elem.parentNode.children).indexOf(th_elem)\n    th_elem.addEventListener(\'click\', (e) => {\n      document.querySelectorAll(\'th.order\').forEach(elem => {\n        elem.classList.remove(\'order-active\')\n        elem.classList.add(\'order-inactive\')\n      })\n      th_elem.classList.remove(\'order-inactive\')\n      th_elem.classList.add(\'order-active\')\n\n      if (!asc) {\n        th_elem.querySelector(\'span\').innerHTML = \'\xe2\x96\xb2\'\n      } else {\n        th_elem.querySelector(\'span\').innerHTML = \'\xe2\x96\xbc\'\n      }\n      const arr = Array.from(th_elem.closest("table").querySelectorAll(\'tbody tr\'))\n      arr.sort((a, b) => {\n        const a_val = a.children[index].innerText\n        const b_val = b.children[index].innerText\n        return (asc) ? a_val.localeCompare(b_val) : b_val.localeCompare(a_val)\n      })\n      arr.forEach(elem => {\n        th_elem.closest("table").querySelector("tbody").appendChild(elem)\n      })\n      asc = !asc\n    })\n  })\n}\n\ntable_sort()

\r\n

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

\r\n

\r\n

\r\n

\n

Answer 5

它确实不仅仅是"排序",而且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一样强大和快速的一个.

Answer 6

我知道使用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);
});