时间戳

首页 > 解决方案 > 无法使用 JavaScript 在表格中添加表格数据

javascript - 无法使用 JavaScript 在表格中添加表格数据

问题描述

我正在尝试制作一个待办事项列表类型的 Web 应用程序，但无法将表格数据添加到我的表格主体中，我已经搜索了很多，并且我尝试控制台记录每个元素，但这个错误仍然出现在我的项目中。数据、数据、元素和键所有这些变量都给出了预期的输出，但我认为我的逻辑在某个地方是错误的。

我的代码如下：

let id, name, rank, year, unit, place, incident, photo, add, table;

id = document.getElementById("id");
name = document.getElementById("name");
rank = document.getElementById("rank");
year = document.getElementById("year");
unit = document.getElementById("unit");
place = document.getElementById("place");
incident = document.getElementById("incident");
photo = document.getElementById("photo");
add = document.getElementById("add");
table = document.getElementById("table");

add.addEventListener("click", (e) => {
  e.preventDefault();
  let data = [
    {
      id: id.value,
      name: name.value,
      rank: rank.value,
      year: year.value,
      unit: unit.value,
      place: place.value,
      incident: incident.value,
      photo: photo.value,
    },
  ];
  createTable(data);
});

const createTable = (data) => {
  let datas = Object.keys(data[0]);
  generateTable(table, datas);
  generateTableHead(table, datas);
};

const generateTableHead = (table, data) => {
  let thead = table.createTHead();
  let row = thead.insertRow();
  for (let key of data) {
    let th = document.createElement("th");
    let text = document.createTextNode(key);
    th.appendChild(text);
    row.appendChild(th);
  }
};

const generateTable = (table, data) => {
  for (let element of data) {
    let row = table.insertRow();
    for (key in element) {
      let cell = row.insertCell();
      let text = document.createTextNode(element[key]);
      console.log(element[key]);
      cell.appendChild(text);
    }
  }
};

我正在关注以下教程 https://www.valentinog.com/blog/html-table/

获得以下输出

尼姑

标签： javascriptarraysdomhtml-tablejavascript-objects

解决方案

试试这个for...of而不是for...in： REVERT

更新

@RahulGurujala 在您正在做的教程中更加关注细节之后，只需更改它（下面的解释）：

const createTable = (data) => {
  let datas = Object.keys(data[0]);
  generateTable(table, datas);
  generateTableHead(table, datas);
};

对此：

const createTable = (data) => {
  let datas = Object.keys(data[0]);
  generateTable(table, data); // notice i'm sending the data array and not only the datas arr with the names only
  generateTableHead(table, datas);
};

当您只需要将键名发送到和generateTable数据到generateTableHeadgenerateTableHeadgenerateTable

推荐阅读