将数组放入HTML表格中并升序或降序 [英] Putting array into an HTML table and ascending or descending them
本文介绍了将数组放入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
}，
{
月：1959-06，
LakeErieLevels：15.769
}，
{
Month：1959-07，
LakeErieLevels：15.237
}，
{
Month：1959-08，
LakeErieLevels：14.801
}，
{
Month：1959-09，
LakeErieLevels：14.137
}，
{
Mo nth：1959-10，
LakeErieLevels：13.89
}，
{
Month：1959-11，
LakeErieLevels ：13.416
}，
{
月：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
}，
{
月：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>
< the>< tr> th Date< th>平均深度< / th>< / tr>< / thead>
< tbody>< / tbody>
< / table>
我知道这似乎很简单，但我很难过。同样，我试图在页面加载时将数组加载到HTML表格中，然后当您单击向上箭头或向下箭头时，表格会按升序或降序排列。
解决方案
您可以使用数组 排序 功能来升序和降序你的数据（对象数组），类似的，
/ **通过比较月份对数据进行排序** /
函数inOrderAsc（a，b）{
return a.Month == b.Month？ 0：+（a.Month> b.Month）|| -1;
}
**通过比较月份降序排列数据** /
函数inOrderDesc（a，b）{
return a.Month == b .Month？ 0：+（a.Month
函数accending（objs）{
return objs.sort（inOrderAsc）;
函数降序（objs）{
return objs.sort（inOrderDesc）;
}
附加活动
附上执行排序操作的按键事件，
/ * *附加事件，将执行排序操作** /
document.onkeydown = initEvent;
函数initEvent（e）{
e = e || window.event;
if（e.keyCode =='38'）{
var result = accending（lakeData）;
displayData（result）;
} else if（e.keyCode =='40'）{
var result = descending（lakeData）;
displayData（result）;
code $ <$ $ p
显示数据
现在最后在排序后显示数据，
/ **显示表中的数据** /
函数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;
$ / code $ / pre
$ b 完整演示在 JsFiddle 。
I'm trying to get a JavaScript array into an HTML table when the page loads, and then when an arrow is clicked (either up or down) it arranges them into ascending or descending order.
Here's the script I have:
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
}
];
And here's the little bit of HTML I have:
<table id="lake">
<thead><tr><th>Date</th><th>Average Depth</th></tr></thead>
<tbody></tbody>
</table>
I know it seems simple, but I'm stumped. Again, I'm trying to get the array to load into a table in HTML when the page loads, and then when you click either an up arrow or down arrow, the table arranges either ascending or descending.
解决方案 Sorting Data
You can use the array Sort function to ascending and descending your data(array of objects), something like,
/** 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);
}
Attach the event
Attach the key down event, on which the sort operation will be performed,
/**Attach event, on which the sort action will be performed **/
document.onkeydown = initEvent;
function initEvent(e) {
e = e || window.event;
if (e.keyCode == '38') {
var result = accending(lakeData);
displayData( result);
} else if (e.keyCode == '40') {
var result = descending(lakeData);
displayData(result);
}
}
Display data
Now finally display the data after sorting,
/** 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;
}
}
The full demo is on JsFiddle.
这篇关于将数组放入HTML表格中并升序或降序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
