CODEWITHSUNDEEP
jqueryhtml
Domas
Domas

Reputation: 1133

Table row acts as a link, but last TD's content has to be skipped

Following is an example of a single table row:

<tr class="altrow">
<td><a href="/companies/view/59">Delta company</a></td>
<td></td>
<td>John</td>
<td>Doe</td>
<td>Green streer</td>
<td><a href="/companies/edit/59" target="_blank"><img src="/img/edit.png" alt="edit" width="18px" height="18px" title="edit" /></a></td>
    </tr>

Here is the jQuery that makes a table row act as a link:

    $('tr.altrow').click( function() {
    window.location = $(this).find('a').attr('href');
}).hover( function() {
    $(this).toggleClass('hover');
});

So it basically finds the first link which is . Then if user clicks anywhere on a table row, he is redirected to the link. The problem is that I am including an image with another link in the last TD. What happens when the icon is clicked is that the icon's link is opened in another tab, but the link for the whole TR is opened as well.

What I would like to do is: if an icon is clicked, then only the second link is opened.

Any help is much much appreciated.

Upvotes: 0

Views: 49

Answers (4)

andi
andi

Reputation: 6522

If you stop the event Propagation for all <a> tags, then those clicks will never make it up to the <tr>. That way the anchors will do their own default actions, and everything else will fall within the <tr> click handler. 

$("tr.altrow a").click(function(e){
    e.stopPropagation();
});

Fiddle: http://jsfiddle.net/cELxM/

Upvotes: 0

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

Just check on what you are clicking : 

$('tr.altrow').click( function(e) {
    if(!$(e.target).closest('[target="_blank"]').length) window.location = $(this).find('a').attr('href');
})

Upvotes: 1

The Angry Saxon
The Angry Saxon

Reputation: 792

Something you could try is

$('tr.altrow').click( function() {
    window.location = $(this).find('a:last-child').click();
}).hover( function() {
    $(this).toggleClass('hover'); 
});

That should have the same effect

Upvotes: 0

Alex
Alex

Reputation: 10216

window.location = $(this).find('a').eq(1).attr('href');

eq(1) recudes the find of all tags to the second.

Upvotes: 0

Related Questions