JavaScript中表格内置按钮传递指定单元格数据的问题咨询

问题根源 #

• 你在绑定点击事件时给this套了双引号，导致传入editCard的是字符串"this"，而非触发点击的按钮DOM对象，无法基于它回溯获取行内单元格数据。

解决方案 #

提供两种可选实现方式，按需选择即可：

方案1：基于DOM回溯获取单元格数据（适合单元格内容会动态修改的场景） #

1. 修正事件绑定代码，去掉this外层的引号：

// 原错误写法：sBtn.setAttribute('onclick', 'editCard("this")')
// 修改为：
sBtn.setAttribute('onclick', 'editCard(this)')

2. 调整editCard函数逻辑，通过按钮回溯获取第一个单元格的内容：

function editCard(btn) {
  // 获取按钮所在的行元素
  const currentRow = btn.parentElement.parentElement;
  // 取第一个单元格（索引为0）的文本内容，就是你要的ref值
  const cardRefNo = currentRow.cells[0].textContent.trim();
  // 此处可正常使用获取到的cardRefNo，比如打印、赋值给表单字段
  console.log('获取到的卡片编号：', cardRefNo);
  document.getElementById("ecForm").style.display = "block";
}

方案2：循环时直接传值（更简洁高效，适合单元格内容固定的场景） #

你在循环创建行的时候已经持有item.G1_Card_Ref的值，不需要后续再从DOM读取，直接绑定事件时传值即可，避免多余DOM操作：

1. 删掉原有的setAttribute绑定，改用addEventListener绑定事件直接传值：

// 删掉 sBtn.setAttribute('onclick', 'editCard("this")') 这行，替换为以下代码
sBtn.addEventListener('click', () => {
  editCard(item.G1_Card_Ref);
})

2. 此时editCard收到的就是你要的卡片编号，可直接使用：

function editCard(CardRefNo) {
  // 此处CardRefNo已经是你需要的G1_Card_Ref值，可直接使用
  console.log('获取到的卡片编号：', CardRefNo);
  document.getElementById("ecForm").style.display = "block";
}

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