Javascript 将数组放入HTML表并对其进行升序或降序

我试图在页面加载时将JavaScript数组放入HTML表中，然后单击箭头（向上或向下）时，它将它们按升序或降序排列

以下是我的脚本：

var lakeData = [
{
    "Month": "1959-01",
    "LakeErieLevels": 12.296
},
{
    "Month": "1959-02",
    "LakeErieLevels": 13.131
},
{
    "Month": "1959-03",
    "LakeErieLevels": 13.966
},
{
    "Month": "1959-04",
    "LakeErieLevels": 15.028
},
{
    "Month": "1959-05",
    "LakeErieLevels": 15.844
},
{
    "Month": "1959-06",
    "LakeErieLevels": 15.769
},
{
    "Month": "1959-07",
    "LakeErieLevels": 15.237
},
{
    "Month": "1959-08",
    "LakeErieLevels": 14.801
},
{
    "Month": "1959-09",
    "LakeErieLevels": 14.137
},
{
    "Month": "1959-10",
    "LakeErieLevels": 13.89
},
{
    "Month": "1959-11",
    "LakeErieLevels": 13.416
},
{
    "Month": "1959-12",
    "LakeErieLevels": 13.871
},
{
    "Month": "1960-01",
    "LakeErieLevels": 14.478
},
{
    "Month": "1960-02",
    "LakeErieLevels": 14.725
},
{
    "Month": "1960-03",
    "LakeErieLevels": 14.763
},
{
    "Month": "1960-04",
    "LakeErieLevels": 15.806
},
{
    "Month": "1960-05",
    "LakeErieLevels": 16.565
},
{
    "Month": "1960-06",
    "LakeErieLevels": 17.097
},
{
    "Month": "1960-07",
    "LakeErieLevels": 17.306
},
{
    "Month": "1960-08",
    "LakeErieLevels": 17.211
},
{
   "Month": "1960-09",
   "LakeErieLevels": 16.717
},
{
   "Month": "1960-10",
   "LakeErieLevels": 15.787
},
{
   "Month": "1960-11",
   "LakeErieLevels": 14.801
},
{
   "Month": "1960-12",
   "LakeErieLevels": 14.231
}
];

下面是我的一点HTML：

<table id="lake">
  <thead><tr><th>Date</th><th>Average Depth</th></tr></thead>
  <tbody></tbody>
</table>

日平均深度

---

我知道这看起来很简单，但我被难住了。同样，我尝试在页面加载时将数组加载到HTML表格中，然后单击向上箭头或向下箭头，表格将升序或降序排列。

排序数据

您可以使用数组函数来升序和降序数据（对象数组），例如

/** Sorting the data in asscending  by comparing month **/
function inOrderAsc(a, b){
  return a.Month == b.Month ? 0 : +(a.Month > b.Month) || -1;
}

/** Sorting the data in descending by comparing month **/
function inOrderDesc(a, b){
  return a.Month == b.Month ? 0 : +(a.Month < b.Month) || -1;
}

function accending(objs){
    return objs.sort(inOrderAsc);
 }

function descending(objs){
    return objs.sort(inOrderDesc);
}

显示数据

现在最后显示排序后的数据

/** Display the data in table **/
function displayData(objs){
    var row, cell, cell2;
    var tbody = document.querySelector('#lake tbody');
    var cloneTbody = tbody.cloneNode(false);
    tbody.parentNode.replaceChild(cloneTbody, tbody);

    for(var i=0; i<objs.length; i++){
        row = cloneTbody.insertRow();
        cell = row.insertCell();
        cell.innerHTML = objs[i].Month;

        cell2 = row.insertCell();
        cell2.innerHTML = objs[i].LakeErieLevels;
    }
}

/**显示表中的数据**/
函数显示数据（objs）{
var行，细胞，细胞2；
var tbody=document.querySelector（“#lake tbody”）；
var cloneTbody=tbody.cloneNode（false）；
tbody.parentNode.replaceChild（cloneTbody，tbody）；
对于（var i=0；iYou需要三件事：一个按升序或降序对数据进行排序的函数，一个用数据生成的行填充表体的函数，最后是两个带有onclick事件处理程序的按钮。
/** Display the data in table **/
function displayData(objs){
    var row, cell, cell2;
    var tbody = document.querySelector('#lake tbody');
    var cloneTbody = tbody.cloneNode(false);
    tbody.parentNode.replaceChild(cloneTbody, tbody);

    for(var i=0; i<objs.length; i++){
        row = cloneTbody.insertRow();
        cell = row.insertCell();
        cell.innerHTML = objs[i].Month;

        cell2 = row.insertCell();
        cell2.innerHTML = objs[i].LakeErieLevels;
    }
}