JavaScript向表格插入单元格时内容重复问题求助（附代码）

嘿，我瞅见你在给表格行插入数组元素当单元格内容时，碰到了内容重复的坑，咱们来拆解下问题出在哪，然后给你修复方案～

问题根源 #

看你贴的代码片段，核心问题出在嵌套循环上：外层循环要插入6个单元格，结果你在每个外层循环里又加了一个遍历fila数组的内层循环。这就导致每插入一个单元格时，都把整个数组的元素重复处理了一遍，自然就出现内容重复的情况。

修正后的代码 #

把嵌套循环改成单层循环，让数组的每个元素对应一个单元格，一一赋值就搞定了：

function addFila() { 
  var iframe = document.getElementById('myFrame'); 
  // 确保iframe已加载，否则contentDocument可能获取失败
  if (!iframe.contentDocument) {
    console.warn('iframe还没加载完成哦');
    return;
  }
  var table = iframe.contentDocument.getElementsByClassName("head_to_head h2h_home")[0]; 
  if (!table) {
    console.warn('没找到目标表格');
    return;
  }
  var row = table.insertRow(1); 
  var fila = ["fecha", "liga", "equipolocal", "equipovisitante", "goleslocal", "golesvisitante"]; 
  
  // 遍历数组，每个元素对应一个单元格
  for (let i = 0; i < fila.length; i++) { 
    // 插入单元格并获取引用
    const cell = row.insertCell(i); 
    // 给单元格设置内容
    cell.textContent = fila[i]; 
  }
}

额外提醒 #

1. 一定要确保iframe已经加载完成再去操作它的DOM，不然contentDocument会返回null，导致后续代码报错；
2. 加个表格存在性的判断，避免找不到表格时出现控制台错误；
3. 如果不需要指定单元格插入位置，insertCell()可以不传索引，默认会把单元格追加到行的末尾，代码会更简洁。

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