如何在点击按钮时将所属<tr>元素存入变量（支持jQuery）

没问题，要实现操作按钮只影响它所在的<tr>元素，用jQuery可以轻松搞定，我给你两种实用的方案：

方案1：直接在按钮点击时传递当前元素 #

这种方法适合你已经在HTML里用onclick绑定函数的场景：

HTML代码 #

<table>
  <tr>
    <td>用户A</td>
    <td>用户A的信息</td>
    <td><button onclick="editUser(this)">编辑</button></td>
  </tr>
  <tr>
    <td>用户B</td>
    <td>用户B的信息</td>
    <td><button onclick="editUser(this)">编辑</button></td>
  </tr>
</table>

JavaScript代码 #

function editUser(button) {
  // 把原生按钮转为jQuery对象，然后用closest()找到最近的<tr>父元素
  var $targetTr = $(button).closest('tr');
  
  // 现在$targetTr就是按钮所在的那一行，你可以对它做任何操作
  editSomething($targetTr);
}

function editSomething($tr) {
  // 示例：获取当前行的所有单元格内容
  var rowData = $tr.find('td').map(function() {
    return $(this).text();
  }).get();
  
  console.log('当前行数据：', rowData);
  // 你的编辑逻辑写在这里...
}

为什么用closest('tr')？
它会向上遍历DOM树，找到最近的匹配<tr>的父元素，不管按钮嵌套在多少层元素里（比如<td>里的<div>）都能精准定位到所在行，比parent().parent()这种硬编码层级的方式灵活得多，DOM结构变化也不会失效。

方案2：用jQuery绑定事件（推荐） #

这种方式遵循「行为与结构分离」的原则，HTML里不用写onclick，维护起来更方便：

HTML代码 #

<table>
  <tr>
    <td>用户A</td>
    <td>用户A的信息</td>
    <td><button class="edit-btn">编辑</button></td>
  </tr>
  <tr>
    <td>用户B</td>
    <td>用户B的信息</td>
    <td><button class="edit-btn">编辑</button></td>
  </tr>
</table>

JavaScript代码 #

// 给所有.edit-btn按钮绑定点击事件
$(document).on('click', '.edit-btn', function() {
  // 这里的this就是被点击的按钮元素
  var $targetTr = $(this).closest('tr');
  editSomething($targetTr);
});

function editSomething($tr) {
  // 示例：修改当前行的样式
  $tr.addClass('editing');
  // 你的编辑逻辑...
}

这种方法的好处是，即使表格是动态生成的（比如通过AJAX加载），$(document).on()也能给新添加的按钮绑定事件，不会失效。

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