javascript - 仅使用 JavaScript 进行表格排序

Question

如何以简单的方式使此功能在单击时适用于具有 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));
            }
        }
    }
}

Answer 1

我写这个函数是为了对表进行排序，就像一千年前，在 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:从哪一行开始排序

lastrow:到哪一列完成排序

降序:排序方向(您可以在其他地方设置 bool 值来切换它)

<小时/>

示例:

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