如何判断在表格中的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>