HTML 表格不顯示

Question

當按下 ID 為“stop”的按鈕時，我想將 javascript 對象變量顯示為 HTML 表格。 我從另一個問題中獲取了一些代碼來解決這個問題，但是由於某種原因，瀏覽器甚至沒有呈現表格。

HTML

<table id="tbody"></table>

JavaScript

stop.addEventListener("click", () => {
  container.style.display = "none";
  stop.style.display = "none";
  tbody.style.display = "block";


  ratings = JSON.parse(sessionStorage.ratings);
  for (let i = 0; i < ratings.length; i++) {
      let tr = "<tr>";
      tr += "<td>" + ratings[i].key.toString() + "</td>" + "<td>" + ratings[i].value.toString() + "</td></tr>";
      tbody.innerHTML += tr;
  }
});

我什至在我的 javascript 文件中特別提到了顯示，如您所見：

 tbody.style.display = "block";

如果需要，您可以在此處找到完整代碼

Answer 1

@Ashish Kumar 是對的，評級變量是一個對象。 TypeError（后來出現）發生是因為我正在像數組一樣索引對象。 通過事件偵聽器函數中的以下編輯修復了該問題：

stop.addEventListener("click", () => {
  container.style.display = "none";
  stop.style.display = "none";
  tbody.style.display = "block";

  ratings = JSON.parse(sessionStorage.ratings);
  // console.log(ratings);
  for (let i = 0; i < Object.keys(ratings).length; i++) {
      let tr = "<tr>";
      tr += "<td>" + Object.keys(ratings)[i] + "</td>" + "<td>" + Object.values(ratings)[i] + "</td></tr>";
      tbody.innerHTML += tr;
  }
});

Answer 2

stop.addEventListener("click", () => {
  container.style.display = "none";
  stop.style.display = "none";

  ratings = JSON.parse(sessionStorage.ratings); // RATINGS IS OBJECT HERE
  for (let i = 0; i < ratings.length; i++) { // ratings.length will not work as it's not an array
      let tr = "<tr>";

      /* Verification to add the last decimal 0 */
      if (ratings[i].value.toString().substring(ratings[i].value.toString().indexOf('.'), ratings[i].value.toString().length) < 2) 
          ratings[i].value += "0";

      /* Must not forget the $ sign */
      tr += "<td>" + ratings[i].key.toString() + "</td>" + "<td>" + ratings[i].value.toString() + "</td></tr>";

      /* We add the table row to the table body */
      tbody.innerHTML += tr;
  }
});

請參閱第 4 行和第 5 行添加的評論