Each and every table row has one TD that holds a <a> link and one TD that holds a form. The following function makes the whole row act as a <a> link:

$('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>. In order for that to work with suggestions I have came up with the following (Note: the form is always in the last 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. 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.

Each and every table row has one TD that holds a <a> link and one TD that holds a form. The following function makes the whole row act as a <a> link:

$('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>. In order for that to work with suggestions I have came up with the following (Note: the form is always in the last 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. 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.

• javascript
• jquery

Share Improve this question Follow edited Jul 29, 2014 at 12:15 amit_183 98133 gold badges1919 silver badges3636 bronze badges asked Jul 29, 2014 at 12:12 DomasDomas 1,13344 gold badges1919 silver badges4646 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Try to use :last-child selector at this context,

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

.last() would select the last element from the whole element collection.

Try this:

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

Use this to get last td

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

:last-child

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

by last()

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