JS调用create_table函数报TypeError: insertRow is not a function错误

核心报错原因 #

这个错误的本质是执行table.insertRow()时，变量table保存的不是标准 DOM节点，节点本身不存在insertRow

• 传入函数的id参数拼写错误，document.getElementById(id)返回null，null上不存在任何可调用方法
• 对应id绑定的元素不是<table>标签，是div、input等其他普通DOM节点
• JS执行时机早于页面DOM渲染，表格标签还没加载完成就执行了选择逻辑，拿到的结果为null

代码附带的其他隐性bug #

就算解决了上述DOM获取的问题，现有代码还有3个会阻断运行的错误：

1. 仅通过insertCell(0)创建了cell0，最后追加元素时用的是未定义的cell1，会触发变量未定义错误
2. 代码里用到的seq、val_sq两个变量没有在函数作用域内声明、也没有作为参数传入，会触发引用错误
3. 创建的input元素没有挂载到对应的单元格下，逻辑不闭环

排查&修复步骤 #

1. 先校验DOM获取结果：在获取table的代码下加一行调试代码，确认拿到的是正确的表格节点

var table = document.getElementById(id);
console.log('获取到的元素：', table, '节点标签：', table?.tagName);

如果控制台打印节点标签不是TABLE、或者元素是null，先修正id拼写，把JS放到DOM加载完成后执行（可以加DOMContentLoaded监听，或者直接把script标签放到页面底部）。

2. 修正后的完整可运行代码参考：

function create_table(id, seq, val_sq){
  var table = document.getElementById(id);
  // 增加边界判断，避免拿不到元素直接抛错
  if (!table || table.tagName !== 'TABLE') {
    console.error('传入的id对应元素不是表格，请检查id配置');
    return;
  }
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount); 

  var cell0 = row.insertCell(0);  
  var element1 = document.createElement("input");  
  element1.style.backgroundColor = "#DDDDDD";

  element1.setAttribute("type","text");
  element1.setAttribute("size","1");
  element1.setAttribute("name",seq);
  element1.setAttribute("id",seq);
  element1.setAttribute("value",val_sq);
  element1.setAttribute("readOnly","true");

  // 修正单元格变量名，把input挂载到对应单元格下
  cell0.appendChild(element1);
}

调用函数时需要把seq、val_sq作为参数传入，比如create_table('myTable', 1, '序号1')，同时要确保页面上存在<table id="myTable"></table>对应的节点。

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