如何判断在表格中的href中单击了哪个行号？

Question

我有一张如下表格：

<table>
   <tr>
      <td>1</td><td>1</td><td><a href="1" id='1' class'alert'>1</a></td>
   </tr>
   <tr>
      <td>2</td><td>2</td><td><a href="2" id='2' class'alert'>2</a></td>
   </tr>
   <tr>
      <td>3</td><td>3</td><td><a href="3" id='3' class'alert'>3</a></td>
   </tr>
</table>

当用户点击<a>时，如何获取此行的索引（tr元素）？

例如，当我点击第一个<a>时，它应该选择它并返回<td>1</td><td>1</td><td><a href="1" id='1' class'alert'>1</a></td>。

Answer 1

您可以使用 index()

获取索引

$('table a').click(function(e) {
  e.preventDefault(); // prevent default click action
  alert($(this)
    .closest('tr') // get the tr
    .index() + 1 // get index based on siblings , add 1 since index start from 0
  );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>1</td>
    <td><a href="1" id='1' class 'alert'>1</a>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
    <td><a href="2" id='2' class 'alert'>2</a>
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td>3</td>
    <td><a href="3" id='3' class 'alert'>3</a>
    </td>
  </tr>
</table>

<小时/> 如果您想在td中获取号码，请使用 prev()

$('table a').click(function(e) {
  e.preventDefault(); // prevent default click action
  alert($(this)
    .parent() // get parent td
    .prev('td') // get previous sibling
    .text() // get text
  );
  // or get first column by
  //  $(this).closest('tr').children('td').eq(0).text()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>1</td>
    <td><a href="1" id='1' class 'alert'>1</a>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
    <td><a href="2" id='2' class 'alert'>2</a>
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td>3</td>
    <td><a href="3" id='3' class 'alert'>3</a>
    </td>
  </tr>
</table>