jquery - 获取与按钮同一行的第一个 td 元素的值

Question

所以我有一个如下结构的表格:

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Company</th>
            <th>Position</th>
            <th>Start Date</th>
            <th>Role</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
             <td><?php info displayed with php ?></td>
             <td><?php info displayed with php ?></td>
             <td><?php info displayed with php ?></td>
             <td><?php info displayed with php ?></td>
             <td><?php info displayed with php ?></td>
             <td><?php info displayed with php ?></td>
             <td><a href="#" class="usr-edit">Edit</a></td>
         </tr>
     </tbody>
</table>

我想要做的是当用户单击编辑时从第一列获取 Id 的值。如果你想 mock 我失败的尝试，这里是:

$('.usr-edit').click(function() {
    var a = $(this).prev().prev().prev().prev().prev().prev().text();

    alert(a);
});

Answer 1

$('.usr-edit').click(function() {
  var a = $(this).closest('tr').find('td:nth-child(1)').text();

  console.log(a);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Company</th>
      <th>Position</th>
      <th>Start Date</th>
      <th>Role</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td><a href="#" class="usr-edit">Edit</a>
      </td>
    </tr>
  </tbody>
</table>

试试这个