点击表格行获取上一行数据失败，如何通过prev()提取目标值？

看来你是想用jQuery实现点击表格某一行时，拿到上一行的FirstName值对吧？你提到用prev()只返回了对象，其实是因为你还需要从这个jQuery对象里定位到对应的单元格，再提取里面的内容或者数据。

我分两种常见的表格场景给你具体的解决方案：

场景1：普通HTML表格 #

假设你的表格结构是这样的：

<table id="userTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>FirstName</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>PersonA</td>
    </tr>
    <tr>
      <td>2</td>
      <td>PersonB</td>
    </tr>
    <tr>
      <td>3</td>
      <td>PersonC</td>
    </tr>
  </tbody>
</table>

那你可以这么写点击事件的代码：

$(document).ready(() => {
  // 给tbody里的行绑定点击事件，避免误点表头
  $('#userTable tbody tr').on('click', function() {
    // 获取当前点击行的上一行jQuery对象
    const prevRow = $(this).prev('tr');
    
    // 先判断上一行是否存在（比如点击第一行时就没有上一行）
    if (prevRow.length > 0) {
      // 假设FirstName是第二列，用eq(1)定位（索引从0开始）
      const prevFirstName = prevRow.find('td').eq(1).text().trim();
      console.log('上一行的FirstName:', prevFirstName); // 点击PersonB的行就会输出PersonA
    } else {
      console.log('这是第一行，没有上一行数据');
    }
  });
});

场景2：使用DataTables插件渲染表格 #

如果你的表格是用DataTables生成的，直接操作DOM的prev()可能会有问题（比如分页、虚拟滚动场景下DOM结构不连续），更稳妥的是用DataTables的API来处理：

假设你的DataTables初始化代码如下：

$(document).ready(() => {
  const table = $('#userTable').DataTable({
    data: [
      { ID: 1, FirstName: 'PersonA' },
      { ID: 2, FirstName: 'PersonB' },
      { ID: 3, FirstName: 'PersonC' }
    ],
    columns: [
      { data: 'ID' },
      { data: 'FirstName' }
    ]
  });

  // 绑定行点击事件
  $('#userTable tbody').on('click', 'tr', function() {
    // 获取当前行在DataTables中的索引
    const currentRowIndex = table.row(this).index();
    
    if (currentRowIndex > 0) {
      // 通过索引直接获取上一行的完整数据对象
      const prevRowData = table.row(currentRowIndex - 1).data();
      // 直接提取FirstName属性
      const prevFirstName = prevRowData.FirstName;
      console.log('上一行的FirstName:', prevFirstName);
    } else {
      console.log('这是第一行，没有上一行数据');
    }
  });
});

为什么你之前的prev()没拿到想要的值？ #

你之前用prev()返回的是jQuery包装后的DOM对象，不是直接的文本或数据。你需要通过find()、eq()这类方法定位到具体的单元格，再用text()提取内容；如果是DataTables场景，直接用它的API获取行数据对象会更可靠，不用纠结DOM结构的问题。

另外要注意：如果表格里有表头行或者空行，最好用tbody来限定选择范围，避免选中无关的行。

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