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

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

我的代码如下：

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);
    }
  }
};

我遵循下面的教程

获得以下输出

在中为…尝试此

，而不是在

中为…尝试此

：还原

更新
@RahulGurujala在更加关注教程中的细节后，只需更改此内容（解释如下）：

const createTable=（数据）=>{
设datas=Object.keys（数据[0]）；
可生成（表格、数据）；
generateTableHead（表格、数据）；
};

为此：

const createTable=（数据）=>{
设datas=Object.keys（数据[0]）；
generateTable（table，data）；//注意，我发送的是数据数组，而不是仅包含名称的数据数组
generateTableHead（表格、数据）；
};

当您只需要将键名发送到
generateTableHead
和
generateTableHead
）和数据发送到
generateTabletable
@rahugurujala查看我的更新答案时，您只需要将键名数组发送到这两个函数（
generateTable
和
generateTableHead
）。希望对你有帮助