JQuery getting the tr after clicking its content <a>
Suppose I have
<table>
<tr>
<td><a class='ilink'> link text </a></td>
<td></td>
<td>开发者_运维知识库</td>
<tr>
<tr>
<td><a class='ilink'> link text </a></td>
<td></td>
<td></td>
</tr>
</table>
in the jquery code, after clicking the link, I want to highlight the entire table row that the link is in. But how can I find it?
You can do it with .closest()
like this:
$("a.ilink").click(function() {
$(this).closest("tr").addClass("highlight");
});
If you have a lot of rows, this would be more efficient (one copy of this vs. one for every <a>
):
$("table").delegate("a.ilink", "click", function(){
$(this).closest("tr").addClass("highlight");
});
#EDIT remove... better options listed
$(document).ready(function(){
$('a.ilink').click(function() {
$('tr').removeClass('highlight');
$(this).closest('tr').addClass('highlight');
});
});
Then you will need the highlight css class defined:
.hightlight { background-color:red; }
精彩评论