动态创建HTML表格时tbody行全部显示在第一列的问题求助

尝试通过JavaScript动态创建表格，但创建完成后所有tbody的行内容都集中显示在第一列，其余列为空。检查生成的HTML代码看似正常，但浏览器渲染结果与预期不符。

当前渲染效果 #

<div class="s-table-container"><table class="s-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 Brendon 25  Toronto</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2 John    23  Vancouver</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table></div>

预期效果 #

<div class="s-table-container"><table class="s-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Brendon</td>
<td>25</td>
<td>Toronto</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>23</td>
<td>Vancouver</td>
</tr>
</tbody>
</table></div>

使用的HTML代码 #

<table id="myTable"></table>
<button onclick="createClickHandle()">Create</button>

使用的JavaScript代码 #

const dataTest = [
  {
    id: 1,
    name: "Brendon",
    age: 25,
    city: "Toronto"
  },
  {
    id: 2,
    name: "John",
    age: 23,
    city: "Vancouver"
  }
];

const createNewTable = (tableObject) => {
  const tableId = tableObject.tableId;
  const data = tableObject.data;
  const header = Object.keys(data[0]);

  createHtmlTable(tableId, header, data);
  
};

const createHtmlTable = (id, header, data) => {
  const htmlTable = document.getElementById(id);

  //create the thead
  createHeader(htmlTable, header);

  //create the tbody
  createBoby(htmlTable, header, data);
};

const createHeader = (table, columns) => {
  const thead = document.createElement("thead");
  const tr = document.createElement("tr");

  columns.forEach((element) => {
    const th = document.createElement("th");
    th.appendChild(document.createTextNode(element));
    tr.appendChild(th);
  });

  thead.appendChild(tr);
  table.appendChild(thead);
};

const createBoby = (table, header, data) => {
  const tbody = document.createElement("tboby");
  
  data.forEach((element) => {
    const tr = document.createElement("tr");

    header.forEach((headerItem) => {
      const td = document.createElement("td");
      td.appendChild(document.createTextNode(element[headerItem]));
      tr.appendChild(td);
    });
    
    tbody.appendChild(tr);
  });

  table.appendChild(tbody);
};

const createClickHandle = () => {
  createNewTable({
    tableId: "myTable",
    data: dataTest,
  });
};

问题出在createBoby函数里创建tbody元素的代码：

const tbody = document.createElement("tboby");

这里把tbody拼写错成了tboby，浏览器无法识别这个错误标签，会将其当作普通匿名元素处理。原本应该放在<tbody>里的<tr>和<td>元素，实际会被解析到表格的错误位置，最终导致所有单元格内容被合并到第一列显示。

修复方法 #

1. 将拼写错误的tboby改为正确的tbody：

const tbody = document.createElement("tbody");

2. 建议同步修正函数名createBoby为createBody（拼写正确），避免后续混淆：

const createBody = (table, header, data) => {
  const tbody = document.createElement("tbody");
  
  data.forEach((element) => {
    const tr = document.createElement("tr");

    header.forEach((headerItem) => {
      const td = document.createElement("td");
      td.appendChild(document.createTextNode(element[headerItem]));
      tr.appendChild(td);
    });
    
    tbody.appendChild(tr);
  });

  table.appendChild(tbody);
};

3. 在createHtmlTable函数中同步修改调用：

//create the tbody
createBody(htmlTable, header, data);

修改后，浏览器就能正确识别tbody容器，表格会按照预期渲染出多列内容。

内容的提问来源于stack exchange，提问作者Rodrigo Fazan