如何按日期列對表格進行排序

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。