如何使用jQuery/Javascript获取HTML网格中上一行的指定列值

核心问题 #

原有代码遍历了表格所有行，最终存储的是整个表格最后一个符合条件的A列值，没有和点击的Edit按钮所在行做绑定，因此无法获取当前行对应的上一行数值。

实现方案 #

绑定Edit按钮的点击事件，从触发源定位当前行后直接获取上一行元素，读取对应列的值即可，代码示例如下：

// 绑定所有Edit按钮点击事件
$('tbody').on('click', '.edit-btn', function() {
  // 定位当前点击按钮所属行
  const $currentRow = $(this).closest('tr');
  // 获取当前行的上一行
  const $prevRow = $currentRow.prev();

  // 第一行无上一行，直接赋值NA
  if (!$prevRow.length) {
    $('#txtofDValue').val('NA');
    $('#txtofEValue').val('NA');
    $('#txtofFValue').val('NA');
    return;
  }

  // 读取上一行A/B/C列的值
  const prevA = Number($prevRow.find('td.tdColumnofAText').text().trim());
  const prevB = Number($prevRow.find('td.tdColumnofBText').text().trim());
  const prevC = Number($prevRow.find('td.tdColumnofCText').text().trim());

  // 赋值给当前行D/E/F输入框
  $('#txtofDValue').val(prevA);
  $('#txtofEValue').val(prevB);
  $('#txtofFValue').val(prevC);
});

注意事项 #

• 代码中的.edit-btn需替换为你实际Edit按钮的类名
• 如果表格每行都有独立的D/E/F输入框，不要用全局ID选择器，改为从当前行查找对应输入框即可，示例：$currentRow.find('.txtofDValue').val(prevA)
• 列选择器tdColumnofBText、tdColumnofCText需替换为你实际B、C列对应的类名

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