点击表格按钮时，如何获取对应行的值与ID？

嘿，我来帮你搞定这两个表格操作的问题，先从你提到的第二个场景（大量行的表格点击按钮取行ID）说起，再覆盖第一个通用场景！

问题2：点击行内按钮获取所在行的ID（.idServico） #

你的尝试代码里有两个核心问题：一是遍历了所有表格行，而不是你点击按钮对应的那一行；二是动态生成的表格行，直接绑定事件可能会失效。这里用事件委托是最优解，既适合大量行的性能需求，也能兼容动态新增的行：

首先，给你动态生成的按钮加个类名（比如btn-get-id），方便我们定位：

// 你的表格生成代码里，给按钮加类名
tabelaResultado.innerHTML += `
<tr>
  <td class="idServico">${idServico}</td>
  <td>${dataEntradaServico}</td>
  <td>${dataSaidaServico}</td>
  <td><button class="btn-get-id">获取ID</button></td>
</tr>
`;

然后用事件委托绑定点击事件，精准获取当前行的ID：

// 给表格容器绑定事件委托，监听按钮点击
$('#tabelaResultado').on('click', '.btn-get-id', function() {
  // 找到当前按钮所在的最近<tr>元素
  const currentRow = $(this).closest('tr');
  // 从该行里获取.idServico的内容
  const id = currentRow.find('.idServico').text().trim();
  alert('当前行ID：' + id);
});

为什么用closest('tr')？它会向上查找最近的父级tr，比parent().parent()更可靠——哪怕按钮嵌套在多层元素里，也能准确找到所在行。而且事件委托只需要绑定一次到表格容器，不管后续新增多少行，按钮都能触发事件，性能拉满。

问题1：点击按钮时获取表格行的所有值 #

方法和上面类似，找到当前行后，遍历该行的所有td即可：

$('#tabelaResultado').on('click', '.btn-get-row', function() {
  const currentRow = $(this).closest('tr');
  // 把该行所有td的文本提取成数组
  const rowValues = currentRow.find('td').map(function() {
    return $(this).text().trim();
  }).get();
  
  // 现在rowValues里就是该行所有列的值，比如：
  console.log('行内所有数据：', rowValues);
  // 可以单独取某一列，比如取输入日期：
  const dataEntrada = rowValues[1];
  alert('输入日期：' + dataEntrada);
});

最后说下你原来代码的问题：$('table tr').each()会循环表格里的每一行，所以alert的是所有行的ID，而不是你点击的那一行。另外动态生成的元素，直接绑定click事件会因为元素还没创建而失效，事件委托完美解决这个问题~

内容的提问来源于stack exchange，提问作者Matheus Alcântara