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

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()将从整个元素集合中选择最后一个元素。