仅使用JavaScript进行表排序

Table Sorting with JavaScript Only

本文关键字：排序 JavaScript      更新时间：2023-09-26

如何以一种简单的方式使此函数在单击时适用于具有3列的表？当用户再次单击时，该表应按降序排序。不允许使用jQuery或其他库。

function sortData() {
    var tableData = document.getElementById('data_table').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 (parseInt(rowData.item(j).getElementsByTagName('td').item(0).innerHTML) > parseInt(rowData.item(j + 1).getElementsByTagName('td').item(0).innerHTML)) {
                tableData.insertBefore(rowData.item(j + 1), rowData.item(j));
            }
        }
    }
}

我写这个函数来排序表，就像一千年前，在jquery存在之前（我想）：

function tableSort(table, column, initrow, lastrow, descending){
    var value1, value2;
    var tbl = document.getElementById(table);
    for(i = initRow;i < lastRow;i++){
        x = i;
        for(j = i+1;j < lastRow + 1;j++){
            value1 = tbl.rows[j].cells[column].innerHTML.toLowerCase().replace(',','.');
            value2 = tbl.rows[x].cells[column].innerHTML.toLowerCase().replace(',','.');
            if(!isNaN(value1)){
                value1 = parseFloat(value1);
                value2 = parseFloat(value2);
            }
            if(!descending && value1 < value2){x = j;}
            else{
                if(descending && value1 > value2){x = j;}
            }
        }
        tbl.tBodies[0].insertBefore(tbl.rows[x], tbl.rows[i]);
    }
}

table：要对进行排序的表的id

column：要对进行排序的列的索引

initrow：从哪一行开始对进行排序

最后一行：排序到哪一列结束

降序：排序方向（您可以在其他地方设置布尔值来切换它）

示例：

<table id='mytable'>
    <th>my first column</th>
    <th desc='false' onclick='tableSort("myTable", 2, 1, 10, this.desc)'>my second column</th>
    <tbody>  <!-- important!!!! -->
         <tr>... etc ...</tr>
    </tbody>
</table>

我建议您运行一个jQuery插件：dataTable。它对排序表非常有帮助，并添加了您将来可能也需要的功能。：D希望它有帮助：）链接到这里：http://www.datatables.net/

相关文章：