如何按日期列对表格进行排序

Question

我有一个表格，我想对日期列进行升序和降序排序。

我已经尝试了下面的代码，但它不起作用。 它仅在对数字进行排序时起作用。

function sortColumn() {
        var table, rows, switching, i, x, y, shouldSwitch;
        table = document.getElementById("example");
        switching = true;
        while (switching) {
            switching = false;
            rows = table.rows;
            for (i = 1; i < (rows.length - 1); i++) {
                shouldSwitch = false;
                x = rows[i].getElementsByTagName("TD")[6];
                y = rows[i + 1].getElementsByTagName("TD")[6];
                if (parseInt(x.innerHTML.toLowerCase()) > parseInt(y.innerHTML.toLowerCase())) {
                    shouldSwitch = true;
                    break;
                }
            }
            if (shouldSwitch) {
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
            }
        }
    }

Answer 1

这是一个比您一直在寻找的更复杂的示例。 它利用了 Array Sort 函数，它可以利用一个可选的compareFunction来执行排序比较。

 $(function() { function tableToArray(tObj) { var result = []; var keys = []; $("thead th", tObj).each(function(i, el) { keys.push($(el).text().trim()); }); $("tbody tr").each(function(i, row) { var temp = {}; $.each(keys, function(j, k) { temp[k] = $("td", row).eq(j).text().trim(); }); result.push(temp); }); return result; } function replaceTableData(tObj, data) { var b = $("tbody", tObj); b.html(""); $.each(data, function(i, row) { var r = $("<tr>").appendTo(b); $.each(row, function(j, cell) { $("<td>").html(cell).appendTo(r); }); }); } function compare(a, b) { var dateA = a.Date; var dateB = b.Date; var result = 0; if (dateA > dateB) { result = 1; } else { result = -1; } return result; } function sortTable() { var tData = tableToArray($("table")); tData.sort(compare); replaceTableData($("table"), tData); } $(".sort-column").click(sortTable); });

 .sort-column { cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <tr> <th>ID</th> <th class="sort-column" data-sort-order="null">Date</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>17/12/1989</td> <td>Homer</td> </tr> <tr> <td>2</td> <td>07/09/2019</td> <td>Marge</td> </tr> <tr> <td>3</td> <td>01/09/2019</td> <td>Bart</td> </tr> <tr> <td>4</td> <td>04/09/2019</td> <td>Lisa</td> </tr> <tr> <td>5</td> <td>14/09/2019</td> <td>Maggie</td> </tr> </tbody> </table>

这根据日期列中的文本进行排序。 比较时，您可能会变得更复杂并将日期解析为日期对象。 但是对于这种日期格式，它并不是真正需要的。

更新

将代码移动到函数中，以便在 Click 事件中调用它。 这是一个非常简单的示例，如果您需要更复杂的操作，请考虑它可能如何工作或 DataTables。