javascript - 更改表上元素的标题

Question

我当前正在使用以下代码创建基于 JSON API 的表。我想将表列的标题更改为“名称”和“分数”，而不是“用户名”和“用户分数”...

我尝试调整创建表列的 forEach 语句，但这不起作用......

axios

.get("[ip censored]/scores")

.then(function(response) {

let sortedList = response.data.sort((a, b) => b.userScore - a.userScore);

console.warn(sortedList);

// EXTRACT VALUE FOR HTML HEADER.

var col = [];

for (var i = 0; i < sortedList.length; i++) {

  for (var key in sortedList[i]) {

    if (

      col.indexOf(key) === -1 &&

      (key === "userName" || key === "userScore")

    ) {

      col.push(key);

    }

  }

}



// CREATE DYNAMIC TABLE.

var table = document.createElement("table");



// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.



var tr = table.insertRow(-1); // TABLE ROW.



for (var i = 0; i < col.length; i++) {

  var th = document.createElement("th"); // TABLE HEADER.

  th.innerHTML = col[i];

  tr.appendChild(th);

}



// ADD JSON DATA TO THE TABLE AS ROWS.

for (var i = 0; i < sortedList.length; i++) {

  tr = table.insertRow(-1);



  for (var j = 0; j < col.length; j++) {

    var tabCell = tr.insertCell(-1);

    tabCell.innerHTML = sortedList[i][col[j]];

  }

}



// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.

var divContainer = document.getElementById("leaderboard");

divContainer.innerHTML = "";

divContainer.appendChild(table);

})

.catch(function(error) {

console.error(error);

});

我还尝试使用 CSS 使表格看起来更漂亮，但仍然不起作用。

Answer 1

假设您知道传入的键名称并且它们是一致的，您所需要的就是 JavaScript 中的简单内联 if/else。

试试这个:

for (var i = 0; i < col.length; i++) {

  var th = document.createElement("th"); // TABLE HEADER
  // This inline if says if col[i] is userName then set innerHTML to Name, else Score
  th.innerHTML = col[i]==='userName' ? 'Name' : 'Score';
  tr.appendChild(th);    
}