javascript - 如何在没有任何依赖关系的情况下对 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;
    }

标签： javascripthtmlsortingdatehtml-table

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)