如何通过点击行内按钮获取JavaScript表格对应行的全部数据

首先你代码里存在一个拼写错误：按钮的onlick应为onclick，先修正这个错误才能让点击事件正常触发。

下面提供两种可行的实现方式：

方法一：利用索引直接从原始数据中获取 #

你在生成按钮时已经传递了行索引i，只需实现btnApply函数，通过索引从response数组中取出对应行的完整数据即可：

function btnApply(index) {
  const rowData = response[index];
  console.log("当前行数据：", rowData);
  // 此处可根据需求处理数据，比如弹窗展示、提交接口等
}

同时修正按钮的拼写错误：

<!-- 把onlick改为onclick -->
<td scope='col'><button onclick='btnApply(" + i + ")'>Apply</button></td>

方法二：通过DOM遍历获取行数据（不依赖原始数组索引） #

如果不想依赖原始数据的索引，可通过事件委托绑定点击事件，通过DOM向上定位到对应行，再提取该行所有单元格内容：

实现步骤： #

1. 移除按钮上的onclick属性，添加类名方便事件选择
2. 给表格绑定事件委托，监听按钮点击
3. 在事件处理函数中，通过closest('tr')找到当前按钮所在行，遍历单元格提取数据

修改后的JavaScript代码：

// 生成表格的代码保留，仅移除按钮的onclick属性并添加类名
for (var i = 0; i < response.length; i++) {
  var objValues = Object.values(response[i]);

  tbody += "<tr>";
  for (var j = 0; j < objValues.length; j++) {
    tbody += "<td scope='col'>" + objValues[j] + "</td>";
  }

  tbody += "<td scope='col'><button class='btnApply'>Apply</button></td>";
  tbody += "<td scope='col'><button class='btnCurrent'>CurrentValue</button></td>";
  tbody += "</tr>";
}
$("#recipeTableData tbody ").html(tbody);

// 绑定事件委托
$("#recipeTableData").on("click", ".btnApply, .btnCurrent", function() {
  // 定位当前按钮所在的行
  const row = this.closest('tr');
  // 获取行内所有单元格
  const cells = row.querySelectorAll('td');
  // 将单元格内容映射为与原始数据结构一致的对象
  const rowData = {};
  // 前columns.length-2个为数据列，最后两个是按钮列
  for (let k = 0; k < columns.length - 2; k++) {
    rowData[columns[k]] = cells[k].textContent;
  }
  console.log("当前行数据：", rowData);
});

这种方法的优势是耦合性更低，即便原始数据发生变化，只要表格结构不变，依然能正确获取数据。

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