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