[英]jQuery capturing last td of every row of a table
Each and every table row has one TD
that holds a <a>
link and one TD
that holds a form
. 每个表行都有一个
TD
是持有<a>
链接和一个TD
保存一个form
。 The following function makes the whole row act as a <a>
link: 以下函数使整行充当
<a>
链接:
$('tr.altrow').click( function(e) {
if(!$(e.target).closest('[target="_blank"]').length) window.location = $(this).find('a').attr('href');
}).hover( function() {
$(this).toggleClass('hover');
});
The problem was that even when the TD hodling the form was clicked, the browser would call <a>
. 问题是,即使点击了表格的TD,浏览器也会调用
<a>
。 In order for that to work with suggestions I have came up with the following (Note: the form is always in the last TD
): 为了使其能够提出建议,我提出了以下建议(注意:表格总是在最后的
TD
):
$('tr.altrow').find('td').last().click(function(event){
event.stopPropagation()
});
The previous function works, but it is only applied to the last TD of the very last row. 上一个函数有效,但它仅适用于最后一行的最后一个TD。 But what I want to happen is that the function would be applied to each and every row of the table.
但我想要发生的是该函数将应用于表的每一行。
And here is the table in question: 这是有问题的表格:
<table cellpadding="0" cellspacing="0" class="list-table">
<tr class="altrow">
<td>10</td>
<td><a href="/customers/view/107">Customer </a></td>
<td>
<form action="/move/107/index" name="post_53d78bbe297a9999750228" id="post_53d78bbe297a9999750228" style="display:none;" method="post"><input type="hidden" name="_method" value="POST"/><input type="hidden" name="data[_Token][key]" value="82f8674d26a21bf73ae0ef89a60830cd71a9fbe4" id="Token60364222"/><div style="display:none;"><input type="hidden" name="data[_Token][fields]" value="d4431eb33bd022aaf88ee331efb5b9a47e305ab9%3A" id="TokenFields2025889457"/><input type="hidden" name="data[_Token][unlocked]" value="" id="TokenUnlocked1072479614"/></div></form><a href="#" onclick="if (confirm('Are you sure?')) { document.post_53d78bbe297a9999750228.submit(); } event.returnValue = false; return false;"><img src="/img/move.png" alt="move" width="30px" height="30px" /></a>
</td>
</tr>
<tr class="altrow">
<td>10</td>
<td><a href="/customers/view/108">Customer </a></td>
<td>
<form action="/move/108/index" name="post_53d78bbe297a9999750228" id="post_53d78bbe297a9999750228" style="display:none;" method="post"><input type="hidden" name="_method" value="POST"/><input type="hidden" name="data[_Token][key]" value="82f8674d26a21bf73ae0ef89a60830cd71a9fbe4" id="Token60364222"/><div style="display:none;"><input type="hidden" name="data[_Token][fields]" value="d4431eb33bd022aaf88ee331efb5b9a47e305ab9%3A" id="TokenFields2025889457"/><input type="hidden" name="data[_Token][unlocked]" value="" id="TokenUnlocked1072479614"/></div></form><a href="#" onclick="if (confirm('Are you sure?')) { document.post_53d78bbe297a9999750228.submit(); } event.returnValue = false; return false;"><img src="/img/move.png" alt="move" width="30px" height="30px" /></a>
</td>
</tr>
<tr class="altrow">
<td>10</td>
<td><a href="/customers/view/109">Customer </a></td>
<td>
<form action="/move/109/index" name="post_53d78bbe297a9999750228" id="post_53d78bbe297a9999750228" style="display:none;" method="post"><input type="hidden" name="_method" value="POST"/><input type="hidden" name="data[_Token][key]" value="82f8674d26a21bf73ae0ef89a60830cd71a9fbe4" id="Token60364222"/><div style="display:none;"><input type="hidden" name="data[_Token][fields]" value="d4431eb33bd022aaf88ee331efb5b9a47e305ab9%3A" id="TokenFields2025889457"/><input type="hidden" name="data[_Token][unlocked]" value="" id="TokenUnlocked1072479614"/></div></form><a href="#" onclick="if (confirm('Are you sure?')) { document.post_53d78bbe297a9999750228.submit(); } event.returnValue = false; return false;"><img src="/img/move.png" alt="move" width="30px" height="30px" /></a>
</td>
</tr>
</table>
Any help is much appreciated. 任何帮助深表感谢。
Try to use :last-child
selector at this context, 尝试使用
:last-child
在这种情况下的:last-child
选择器,
$('tr.altrow td:last-child').click(function(event){
event.stopPropagation()
});
.last()
would select the last element from the whole element collection. .last()
将从整个元素集合中选择最后一个元素。
Try this: 试试这个:
$('tr.altrow td:last-of-type').click(function(event){
event.stopPropagation()
});
使用它来获得最后一个td
$('tr.altrow').find('td:last')
$('tr.altrow td:last-child').click(function(event){
event.stopPropagation()
});
$('tr.altrow ').find("td").last().click(function(event){
event.stopPropagation()
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.