如何在沒有任何依賴的情況下對html表中的日期列進行排序？

Question

我想按表中的最新和最早的日期對“日期”列進行排序。

我已經在下面嘗試過代碼，但無法正常工作。 我不知道如何對表格進行排序，因為我是該領域的新手。

function convertDate(d) {
        var p = d.split("/");
        return +(p[2] + p[1] + p[0]);
    }

    function sortByDate() {
        var tbody = document.querySelector("#example tbody");
        // get trs as array for ease of use
        var rows = [].slice.call(tbody.querySelectorAll("tr"));
        rows.sort(function(a, b) {
            return convertDate(a.cells[7].innerHTML) - convertDate(b.cells[7].innerHTML);
        });

        rows.forEach(function(v) {
            tbody.appendChild(v); // note that .appendChild() *moves* elements
        });
    }

    document.querySelector("button").addEventListener("click", sortByDate);

//retrieve data from firebase
 rootRef.on('child_added', function(childSnapshot) {
        rootRef = childSnapshot.val();
        var tr = document.createElement('tr');
        tr.appendChild(createCell(rootRef.date));
        table.appendChild(tr);
    });


    function createCell(text) {
        var td = document.createElement('td');
        td.appendChild(document.createTextNode(text));
        return td;
    }

Answer 1

我不知道您從何處獲取日期，但假設您可以輕松地從中獲取數組； 我認為自定義排序功能可以解決問題。 當然，使用Date對象可能會獲得更精美的代碼，但是由於只有三個排序標准，因此我認為過度設計的意義不大。 這是我想出的代碼：

 //test case date array let dates = ["15-Dec-2015", "23-Feb-2029", "14-Apr-2009", "15-Apr-2009", '15-May-2009', '14-Apr-2004']; //custom sorting let sortedDates = dates.sort((a, b) => { //compare function const monthArray = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; //month index //split a and b a = a.split('-'); b = b.split('-'); //compare years if(Number(a[2]) > Number(b[2])) return 1; if(Number(a[2]) < Number(b[2])) return -1; //compare months if(monthArray.indexOf(a[1]) > monthArray.indexOf(b[1])) return 1; if(monthArray.indexOf(a[1]) < monthArray.indexOf(b[1])) return -1; //compare days if(Number(a[0]) > Number(b[0])) return 1; if(Number(a[0]) < Number(b[0])) return -1; }); console.log(sortedDates) //returns ["14-Apr-2004", "14-Apr-2009", "15-Apr-2009", "15-May-2009", "15-Dec-2015", "23-Feb-2029"] 

編輯：

不知道它是否會工作，但是我嘗試用您的數據實現代碼：

 //test case date array let dates; function convertDate(d) { var p = d.split("/"); return +(p[2] + p[1] + p[0]); } function sortByDate() { var tbody = document.querySelector("#example tbody"); // get trs as array for ease of use var rows = [].slice.call(tbody.querySelectorAll("tr")); rows.sort(function(a, b) { return convertDate(a.cells[7].innerHTML) - convertDate(b.cells[7].innerHTML); }); rows.forEach(function(v) { tbody.appendChild(v); // note that .appendChild() *moves* elements }); } document.querySelector("button").addEventListener("click", sortByDate); //retrieve data from firebase rootRef.on('child_added', function(childSnapshot) { rootRef = childSnapshot.val(); var tr = document.createElement('tr'); tr.appendChild(createCell(rootRef.date)); dates.push(rootRef.date); table.appendChild(tr); }); function createCell(text) { var td = document.createElement('td'); td.appendChild(document.createTextNode(text)); return td; } //custom sorting let sortedDates = dates.sort((a, b) => { //compare function const monthArray = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; //month index //split a and b a = a.split('-'); b = b.split('-'); //compare years if(Number(a[2]) > Number(b[2])) return 1; if(Number(a[2]) < Number(b[2])) return -1; //compare months if(monthArray.indexOf(a[1]) > monthArray.indexOf(b[1])) return 1; if(monthArray.indexOf(a[1]) < monthArray.indexOf(b[1])) return -1; //compare days if(Number(a[0]) > Number(b[0])) return 1; if(Number(a[0]) < Number(b[0])) return -1; }); console.log(sortedDates)