如何用JavaScript根据HTML表格左侧单元格填充对应内容？

我来帮你搞定这个表格填充的问题！你的核心需求是根据左侧单元格的名称，匹配rightcell数组里的对应项，把carac值填到右侧单元格，对吧？先梳理下你之前代码里的几个关键问题，再给你一个简洁可靠的实现方案。

你之前代码的问题分析 #

• 索引不匹配：rightcell数组里的元素顺序和arr2的名称顺序完全不一样（比如Name5在rightcell里是第3项，但在arr2里是第5项），直接用索引j去对比setName[j]和arr2[j]肯定匹配不上。
• 作用域与循环逻辑错误：第一个代码里，创建完10行后再遍历单元格时，变量j已经是10了，setName[j]会变成undefined，完全无法匹配；第二个代码里嵌套arr2.forEach属于多余操作，反而会导致重复执行逻辑。
• jQuery选择器错误：你写的$('myTable')是错误的，id选择器需要加#，应该是$('#myTable')。

正确实现方案 #

我们可以先把rightcell转换成一个名称到carac的映射对象（或者ES6的Map），这样每次查找对应的值时不用循环整个数组，效率更高，逻辑也更清晰。然后直接遍历arr2的名称列表，逐个创建表格行并填充内容。

完整原生JS代码示例 #

<table id="myTable"></table>

<script>
// 原始数据
const rightcell = [
  {name: "Name2", carac: "N2"},
  {name: "Name8", carac: "N8"},
  {name: "Name5", carac: "N5"}
];

// 把rightcell转成名称到carac的映射，方便快速查找
const nameToCarac = {};
rightcell.forEach(item => {
  nameToCarac[item.name] = item.carac;
});

// 左侧单元格的名称列表
const arr2 = ["Name1","Name2","Name3","Name4","Name5","Name6","Name7","Name8","Name9","Name10"];

// 获取表格元素
const table = document.getElementById("myTable");

// 遍历名称列表，创建表格行
arr2.forEach(name => {
  // 插入新行
  const row = table.insertRow();
  // 插入左侧单元格并填充名称
  const cell1 = row.insertCell(0);
  cell1.textContent = name;
  // 插入右侧单元格，根据映射填充carac，没有则填"nothing"
  const cell2 = row.insertCell(1);
  cell2.textContent = nameToCarac[name] || "nothing";
});
</script>

代码说明 #

1. 创建映射对象：nameToCarac会变成{Name2: "N2", Name8: "N8", Name5: "N5"}，这样通过nameToCarac["Name2"]就能直接拿到对应的N2，不用每次循环数组查找。
2. 遍历名称列表：直接循环arr2的每个名称，创建行和单元格，逻辑更直观。
3. 填充右侧单元格：用nameToCarac[name] || "nothing"表示，如果找到对应的值就用它，找不到就显示nothing。

jQuery版本（如果你习惯用jQuery） #

<table id="myTable"></table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const rightcell = [
  {name: "Name2", carac: "N2"},
  {name: "Name8", carac: "N8"},
  {name: "Name5", carac: "N5"}
];

const nameToCarac = {};
rightcell.forEach(item => {
  nameToCarac[item.name] = item.carac;
});

const arr2 = ["Name1","Name2","Name3","Name4","Name5","Name6","Name7","Name8","Name9","Name10"];

const $table = $("#myTable");
arr2.forEach(name => {
  const $row = $("<tr></tr>");
  $row.append(`<td>${name}</td>`);
  $row.append(`<td>${nameToCarac[name] || "nothing"}</td>`);
  $table.append($row);
});
</script>

这样就能完美实现你想要的效果：左侧显示所有名称，右侧匹配到的显示对应的carac，没匹配到的显示nothing。

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