如何用JavaScript创建并遍历动态表格？报错求助

错误含义 #

Uncaught TypeError: Cannot read properties of undefined (reading '0') 核心意思是：你试图读取一个undefined对象的0属性——简单说就是你认为是表格行的变量实际是undefined，却还想获取它的第0个单元格，自然触发报错。

关于表格是否创建：此时表格要么还没被浏览器加载/渲染到DOM里，要么你创建表格的代码没完成行/单元格的插入，导致遍历的时候拿不到有效的行数据。

常见原因及解决办法 #

• DOM加载顺序问题
  如果你在页面DOM还没加载完成时就执行遍历代码，比如把JS写在<head>里却没等DOM就绪，document.getElementById拿不到表格元素，后续操作table.rows就会出问题。
  解决：把遍历代码放到DOMContentLoaded回调里，或者直接写在表格HTML代码的后面。
  示例：

  document.addEventListener('DOMContentLoaded', function() {
    const table = document.getElementById('target-table');
    // 这里执行遍历逻辑
  });
  

• 表格行未正确插入DOM
  手动创建表格时，如果你只创建了<tr>元素，却没通过appendChild把它添加到表格的<tbody>里，table.rows集合里就没有对应的行，遍历到不存在的行时就会出现undefined。
  解决：创建行后必须完成插入操作，比如：

  const table = document.getElementById('target-table');
  const tbody = table.tbody || table.appendChild(document.createElement('tbody'));
  const tr = document.createElement('tr');
  tbody.appendChild(tr); // 必须先插入，再遍历
  

• 循环索引越界
  如果循环条件写错（比如i <= table.rows.length），当i等于table.rows.length时，table.rows[i]就是undefined，再去读取cells[0]就会触发报错。
  解决：把循环条件改成i < table.rows.length，确保索引在有效范围内。

验证表格状态的小方法 #

遍历前可以加个简单判断，确认表格状态：

const table = document.getElementById('target-table');
if (!table) {
  console.log('表格未被找到');
  return;
}
if (table.rows.length === 0) {
  console.log('表格存在，但还没有添加行');
}

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