javascript - 如何按表头单击对数组进行排序

Question

 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 加载的完全相同，但事实并非如此，而且我似乎找不到解决方案。有没有简单的解决方法？

Answer 1

我相信您的问题出在您对函数进行字符串化的方式上:

// 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>`;

}