JQuery如何选择动态表格内点击按钮对应TD中的指定输入框

问题原因 #

你原来的代码失效是因为 closest() 方法仅会向上查找当前元素的祖先节点，你点击的timeInReset按钮的祖先节点是自身所在的td、父级tr、table等，并不包含相邻的td.timeIn，所以匹配不到目标元素。

正确实现代码 #

$(document).ready(function(){
  // 处理签到时间重置按钮
  $("button.timeInReset").click(function () {
    // 先定位当前按钮所在的行，再从行内精准匹配对应输入框
    const $timeInInput = $(this).closest('tr').find('td.timeIn input');
    // 操作输入框：设置样式+取值
    $timeInInput.css({"color": "red", "border": "2px solid red"});
    const timeInVal = $timeInInput.val();
    // 后续可根据需求处理timeInVal
  });

  // 处理签退时间重置按钮
  $("button.out").click(function () {
    // 建议先给签退时间的td加class="timeOut"，就可以用和上面一致的写法，结构更稳定
    // 这里你没加类，暂时用索引匹配
    const $timeOutInput = $(this).closest('tr').find('td:eq(3) input');
    const timeOutVal = $timeOutInput.val();
  });
});

实现说明 #

• 用closest('tr')先定位到按钮所在的当前行，可完全隔离其他行的元素，不会出现匹配到所有输入框的问题
• 从父级行内使用find()筛选目标输入框，即便后续你调整了td的排列顺序，只要给对应td保留固定类名，代码就不需要修改，兼容性更强
• 如果确认表格结构不会变动，也可以用$(this).parent().prev().find('input')直接查找当前按钮所在td的前一个相邻td内的输入框

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