Sinatra+ERB渲染表格，用jQuery点击编辑按钮获取对应行TD数据（无需指定类/ID）

嘿，我来帮你搞定这个问题！首先得提个关键小细节：你页面里的编辑按钮都用了同一个id="editbutton"，但HTML规范里id必须是唯一的，所以得把这个改成class="editbutton"，不然jQuery选择器只会选中第一个按钮，后面的都没法触发事件哦。

第一步：修正按钮的HTML #

把每个编辑按钮的id="editbutton"替换成class="editbutton"，同时可以去掉重复的onclick="editModal()"（后面用jQuery绑定事件更规范）：

<td>
  <a class="editbutton btn btn-default" data-toggle="modal" data-target="#basicModal4" aria-hidden="true" name="btn" data-modal-type="confirm">
    <em class="fa fa-pencil"></em>
  </a>
</td>

第二步：编写jQuery代码获取两个单元格的值 #

通过closest('tr')定位到按钮所在的行，再用find('td')拿到该行所有单元格，最后通过eq()指定索引（从0开始）提取第一个（问题）和第二个（答案）单元格的内容：

$('.editbutton').click(function(e) {
  // 精准定位当前按钮所在的表格行
  const $currentRow = $(this).closest('tr');
  
  // 获取第一个td的文本（问题），trim()去除前后多余空白
  const question = $currentRow.find('td').eq(0).text().trim();
  // 获取第二个td的文本（答案）
  const answer = $currentRow.find('td').eq(1).text().trim();
  
  // 这里可以把值传递给模态框，比如填充输入框
  console.log('问题:', question);
  console.log('答案:', answer);
  // 示例弹窗展示结果
  alert(`问题：${question}\n答案：${answer}`);
  
  // 如果你的editModal()需要这两个值，也可以在这里调用并传参
  // editModal(question, answer);
});

为什么这个方案可行？ #

• closest('tr')：向上遍历DOM树，直接找到按钮所属的行，完全不需要给行加额外的id或类。
• eq(index)：通过索引直接选取对应单元格，不用给每个<td>加特定标识，完美符合你的需求。
• trim()：避免单元格文本前后的空白字符，保证拿到的内容干净整洁。

这样就能轻松获取每行的两个单元格值啦，完全不用给任何行或单元格加额外的类或ID！

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