点击ajouter按钮无法向tableau1表格末尾插入新行的问题求助

问题排查&修复方案 #

你的代码里存在3处核心错误，逐一修改即可正常运行：

• 方法名拼写错误：DOM获取单个元素的方法是getElementById，末尾没有s，你获取sup、pro输入值时的方法名写错了，运行时会直接抛出方法未定义的报错，导致后续逻辑中断。
• 单元格变量声明错误：你连续声明了两次td2，第三个单元格对应的td3没有提前声明，给td3赋值时会触发变量未定义的报错。
• 行数变量未初始化：nblignes没有定义初始值，插入行时的位置参数非法，导致插入失败。如果要固定在表格末尾插入行，直接调用insertRow(-1)即可，不需要自己维护行数变量，兼容性更好。

（可选优化）现有表格第一列都是带scope="row"的th标签，新增行也可以保持相同结构，页面样式和语义化更统一。

修复后的完整JS代码 #

function submit_form() {
  let cult  = document.getElementById('cult').value;
  let sup   = Number(document.getElementById('sup').value);
  let pro   = Number(document.getElementById('pro').value);
  let table = document.getElementById('tableau1');
  // 传-1代表直接在表格末尾插入新行
  let row   = table.insertRow(-1);
  // 第一列用th和原有格式统一
  let th1 = document.createElement('th')
  th1.scope = 'row'
  th1.innerHTML = cult
  row.appendChild(th1)
  let td2 = row.insertCell(1);
  let td3 = row.insertCell(2);
  td2.innerHTML = sup;
  td3.innerHTML = pro;
}

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