Question

每个表格行都有一个TD，其中包含<a>个链接，另一个TD包含form。以下函数使整行充当<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');
 });

问题在于，即使点击了表格的TD，浏览器也会调用<a>。为了使其与建议一起使用，我提出了以下内容（注意：表单始终位于最后TD）：

 $('tr.altrow').find('td').last().click(function(event){
    event.stopPropagation()
});

上一个功能有效，但它仅适用于最后一行的最后一个TD。但我想要发生的是该函数将应用于表的每一行。

以下是有问题的表格：

<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>

非常感谢任何帮助。

Answer 1

尝试在此上下文中使用:last-child选择器，

$('tr.altrow td:last-child').click(function(event){
    event.stopPropagation()
});

.last()将从整个元素集合中选择最后一个元素。

Answer 2

试试这个：

$('tr.altrow td:last-of-type').click(function(event){
    event.stopPropagation()
});

Answer 3

使用此功能获取上一个td

$('tr.altrow').find('td:last')

Answer 4

:last-child

  $('tr.altrow td:last-child').click(function(event){
        event.stopPropagation()
    });

last()

 $('tr.altrow ').find("td").last().click(function(event){
        event.stopPropagation()
    });

jQuery捕获表的每一行的最后一个td

4 个答案: