Right click on the table row not working with click function

Question

I have a table and this code to find the a href and make a whole row clickable:

$(document).ready( function() {

        $('table tr').click(function() {
            var href = $(this).find("a").attr("href");
            if(href) {
                window.location = href;
            }
});

However, there is one problem and that's my right click do not offer me "Open link in new tab" option and window etc. stuff like on a normal a href link.

Using divs instead of table is not an option.

How to fix it?

Is there any jQuery plugin that ca nfix it for me?

My table looks like this (it's much bigger with more td's but just for illustration):

<table>
    <tr>
         <td>
             <a href="http://example.com">Some link</a>
             <span>Bla bla bla</span>
         </td>
         <td>
             <span>Some text</span>
         </td>
    </tr>
    <tr>
         <td>
             <a href="http://someotherlink.com">Some link</a>
             <span>Other text</span>
         </td>
         <td>
             <span>Something else</span>
         </td>
    </tr>
    <tr>
         ...
    </tr>
</table>

EDIT: I need to grab the a href value automatically like in my current code: $(this).find("a").attr("href");

EDIT 2: I need to be the whole tr clickable (as a block). which is possible using the method above. However, it is not possible to click on the row and select "Open link in a new tab". This option is available only when I hover over the a href. But I need it to be also on the whole row. So, if the user wants to open multiple new tabs using middle mouse button or right click and selecting "Open in a new tab" from the context menu, he can do it. Right now it is not possible.

Do you mean that you want the right-click link options like "Open Link in New Tab" to apply to the entire table row? — nnnnnn
– nnnnnn, Commented Aug 8, 2012 at 5:18
@Derfder the obvious solution is to have every column in the row to be a link. You can style them however you want. — Strelok
– Strelok, Commented Aug 8, 2012 at 6:13

Mihai Matei · Accepted Answer · 2012-08-08 06:30:22Z

2

Why don't you try something like this:

JS:

$(document).ready(function(){
    $("table tr").mousedown(function(e){

        document.oncontextmenu = function() {return false;}; 

        e.preventDefault();

        var href = $(this).find("a").attr("href");
        if( e.button == 2 ) {
            $(this).find('td:first').prepend('<div class="blank"><a href="' + href + '" target="_blank">Open in new window</a></div>').find('.blank').css('left',e.pageX + 'px').css('top',e.pageY + 'px').fadeIn(400);

        } else if(e.button === 0) {
            if(href) { 
                window.location = href;
            }
        } 
    });

    $(document).on('click','.blank a',function(){ 
        $(this).parent().fadeOut(400,function() { 
            $(this).remove(); 
        }); 
    }).on('mouseleave','.blank',function(){  
        $(this).fadeOut(400, function(){ 
            $(this).remove();     
        });     
    }); 

});

CSS:

.blank {
    display:block;
    padding:4px;
    background:#c3c3c3;
    position:absolute;
}

table tr td {
    overflow:visible;
    position:relative;
}

table tr {
    cursor:pointer;
}

Here is a jsfiddle, but note that I didn't stylized the appearance and the javascript code must be updated regarding the left button click.

edited Aug 8, 2012 at 6:30

answered Aug 8, 2012 at 6:03

Mihai Matei

24.3k5 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Derfder Over a year ago

Yes, I think it is the only possibility how to deal with it.

TimSPQR Over a year ago

Old post, I just wanted to thank everyone for this. I've been pulling my hair out with a problem using .click, so I switched to $().on('click', etc - and everything works fine...Thanks!

coolguy · Accepted Answer · 2012-08-08 05:45:04Z

0

Try this

    $('tr th, tr td').wrapInner('<a href="http://example.com"></a>').children('a').click(function() {
   var href = $(this).attr("href"); if(href) { window.location = href; }
});

//If there is any delegation issue try this

    $('tr th, tr td').wrapInner('<a class="links" href="http://example.com"></a>');
$('body').delegate('a.links','click',function(e){
e.preventDefault();

   var href = $(this).attr("href"); if(href) { window.location = href; }
});

edited Aug 8, 2012 at 5:45

answered Aug 8, 2012 at 5:24

coolguy

7,9549 gold badges48 silver badges72 bronze badges

5 Comments

Derfder Over a year ago

Would it be html5 valid? Btw. I need it to grab the href value automatically like: var href = $(this).find("a").attr("href"); if(href) { window.location = href; }

coolguy Over a year ago

Yes it is valid HTML5 and you need to change your code to var href = $(this).attr("href"); if(href) { window.location = href; } and replace my alert message

Derfder Over a year ago

OK, I will try it now and let you now if it works in 10 minutes ;)

Derfder Over a year ago

Thanks, but your code will make all the links target to example.com and even span became links :(. I do not want that. I just need to be the tr clickable. which is possible using the method. In my original post. However, it is not possible to click on the row and select "Open link in a new tab". This option is available only when I hovver over the a href, but I need it to be also on the whole row. So, if the user wants to open multiple new tabs using middle mouse button or right click and Open in a new tab, he can do it. Right now it is not possible.

nnnnnn Over a year ago

@Derfder - You could wrap everything in anchors as ubercooluk suggests but then style the anchors so that look like normal text (and remove them from the tab order). I don't think there's any way to make an anchor's right-click menu appear for other elements.

Collectives™ on Stack Overflow

Right click on the table row not working with click function

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related