javascript - 如何按表格标题对数组进行排序
问题描述
var teamData = [{"teamName":"Liverpool","GW12FIX":"FUL (A)","GW12":0.61,"GW13FIX":"TOT (H)","GW13":0.51,"GW14FIX":"CRY (A)","GW14":0.63,"GW15FIX":"WBA (H)","GW15":0.68,"GW16FIX":"NEW (A)","GW16":0.56,"AVG":0.60},
{"teamName":"Chelsea","GW12FIX":"EVE (A)","GW12":0.62,"GW13FIX":"WOL (A)","GW13":0.54,"GW14FIX":"WHU (H)","GW14":0.55,"GW15FIX":"ARS (A)","GW15":0.58,"GW16FIX":"AVL (H)","GW16":0.59,"AVG":0.58},
{"teamName":"Manchester United","GW12FIX":"MCI (H)","GW12":0.52,"GW13FIX":"SHU (A)","GW13":0.68,"GW14FIX":"LEE (H)","GW14":0.61,"GW15FIX":"LEI (A)","GW15":0.53,"GW16FIX":"WOL (H)","GW16":0.54,"AVG":0.58}];
我有一个数组,我正在尝试向 th 添加一个 onClick 排序函数,同时使用这样的函数加载表
function sortColumn(columnName) {
const dataType = typeof teamData[0][columnName];
sortDirection = !sortDirection;
switch(dataType) {
case 'number':
sortNumberColumn(sortDirection, columnName);
break;
}
loadTableData(teamData);
}
function sortNumberColumn(sort, columnName) {
teamData = teamData.sort((f1, f2) => {
return sort ? f2[columnName] - f1[columnName] : f1[columnName] - f2[columnName]
});
}
我正在像这样加载表格
window.onload = () => {
loadTableData(teamData);
};
function loadTableData(teamData) {
var columns=Object.keys(teamData[0]).filter(key=>key.includes("FIX")).map(key=>key.slice(0,key.length-3));
var tableHTML="";
tableHTML+="<table>";
tableHTML+="<tr>";
tableHTML+="<th>"+"FDR"+"<span>"+"RELATIVE"+"</span></th>"
for (var i=0; i<columns.length; i++) {
tableHTML+="<th>"+columns[i]+"</th>";
}
tableHTML+="<th>"+"AVG"+"</span></th>"
tableHTML+="</tr>";
for(var t=0; t<teamData.length; t++) {
tableHTML+="<tr>";
tableHTML+="<td>"+teamData[t].teamName+"</td>";
for(var c=0; c<columns.length; c++) {
tableHTML+="<td bgcolor='"+bgcolor(teamData[t][columns[c]])+"'><font color='"+color(teamData[t][columns[c]])+"'>"+teamData[t][columns[c]+"FIX"]+"<br>"+Math.round(teamData[t][columns[c]]*100)+"%"+"</td>";
}
tableHTML+="<td bgcolor='"+bgcolor(teamData[t].AVG)+"'><font color='"+color(teamData[t].AVG)+"'>"+Math.round(teamData[t].AVG*100)+"%"+"</td>";
tableHTML+="</tr>";
}
tableHTML+="</table>";
document.getElementById('teamData').innerHTML=tableHTML;
}
如果我尝试添加这样的功能,表格将不会加载
for (var i=0; i<columns.length; i++) {
tableHTML+="<th onclick='"+sortColumn(columns[i])+"'>"+columns[i]+"</th>";
}
当我在 HTML 中使用 th 时,它工作得很好,我认为它与刚刚由 JS 加载的内容完全相同,但事实并非如此,而且我似乎找不到解决方案。有一个简单的解决方法吗?
解决方案
我相信您的问题来自您如何对函数进行字符串化:
// try to log the result of this:
console.log("<th onclick='"+sortColumn(columns[i])+"'>"+columns[i]+"</th>");
// you will probably have something like this:
// <th onclick='undefined'>GW12</th>
// but what you want should look like:
// <th onclick='sortColumn("GW12")'>GW12</th>
// So try this:
for (var i=0; i<columns.length; i++) {
tableHTML+=`<th onclick='sortColumn("${columns[i]}")'>${columns[i]}</th>`;
}
推荐阅读
- c++ - alloca的性能
- excel - 转置动态范围exel VBA
- python - 嵌套对象的更快数据聚合算法
- mysql - promise.resolve 中的 for 循环内的 mySQL 查询不起作用
- flutter - Flutter 无效的插件规范 path_provider_windows
- php - 2020 年使用 PHP 7.2 设置 SMTP 邮件 - 2020 年 PHP 邮件
- django - 有没有办法在“urlpatterns”中添加不记名令牌,以便我也可以在浏览器中使用 Rest API?
- node.js - Socket.io双连接只有一个客户端
- spring - Spring Boot 应用程序在运行 Cloud Task 后如何退出?
- r - 如何在R中的绘图中添加图例