Get the row id of html table after right click

Question

What I want to do here is to capture the id of every row the user right clicks on. So, if a user right clicks on a row that has an id=22, then I need to capture '22'. I'm new to Jquery.

Here is what I have so far:

  $("tr").mousedown(function(event) {
    if (event.which === 3) {
      alert($(this).attr("id"));
    }
  });

This doesn't give me anything back though. Each <tr> has an id attached to it. How to get it is the question.

EDIT:

Even using 'tr', I am not able to detect a mousedown event for some reason.

Make sure you're binding the handler after the document is ready. Side note: [you can **always** use `this.id` instead of `$(this).attr("id")`.](http://stackoverflow.com/q/4651923/139010) — Matt Ball, Aug 26 '13 at 21:42
I think I may have another issue because I'm not even detecting a mousedown event. I can get to `#tbl1 tbody` but that's where it ends. If I add the `tr` to it, I don't get the event. — NaN, Aug 26 '13 at 21:49
Just so you know, using `$("#tbl1").find('tbody').find('tr')` can be nearly twice as fast as `$("#tbl1 tbody tr")`. Might not be an issue with this page, but it is a good idea to get into the habit of using `find` instead :) — Jordan, Aug 26 '13 at 21:51
This will help also hhttp://stackoverflow.com/questions/706655/bind-event-to-right-mouse-click — Charaf JRA, Aug 26 '13 at 22:22

score 2 · Answer 1 · answered Aug 26 '13 at 22:10

DEMO HERE

Based on details you gave in your comments , you want when you right click on each row, an alert shows id of the tr element clicked :

Try this :

 $('#tbl1 tbody tr').mousedown(function(e){

    if(e.button==2) alert($(this).attr('id'));

 });

Bart Calixto · Accepted Answer · 2013-08-26T22:24:51.170

I think datatables binds after DOM is ready, so you may need to do :

$(function() {
    $('#tbl1').on('contextmenu', 'tr', function(e) {
        e.preventDefault();
        alert(this.id);
    });
});

if that still doesn't work try a more exhaustive test :

$(function() {
    $('body').on('contextmenu', 'tr', function(e) {
        e.preventDefault();
        alert(this.id);
    });
});

You can use .on() with the specified parameters so you can attach the event listener to a known dom ready time element available.

The first one will bind the event listener to #tbl1 while the last will attach the event listener to body. So everytime right click is pressed on anything inside the body will check if the element is a tr and will fire. Since the event is attached to body (and it's likely to do not change over the use of the application) will most likely work BUT it will be too broader so it's better (because prevents useless checks) if you limit to the table or a div that it's parent of datatables, depending on how datatables manipulates the DOM.

Thank you Bart. I'm going to try this now. – NaN Aug 26 '13 at 22:37 — NaN, Aug 26 '13 at 22:37

score 1 · Answer 3 · answered Aug 26 '13 at 22:07

Ok, based on what you asked at the comment of my previous answer, you should change your question to match what you want. You are looking for a RIGHT-CLICK mouse id show.

This should work:

$("#tbl1 tbody tr").bind("contextmenu",function(e) {
   e.preventDefault();
   alert($(this).attr('id'));
});

And this is the updated fiddle: Fiddle

score 0 · Answer 4 · answered Aug 26 '13 at 21:50

0

Your example works for me without any issues. http://jsfiddle.net/YzR47/

$(document).ready(function() {
    $("#tbl1 tbody tr").mousedown(function(event) {
        if (event.which === 3) {
          alert($(this).attr("id"));
        }
      });
});

answered Aug 26 '13 at 21:50

Anthony Ledesma

553
2
9

Hi Anthony. I just noticed that I'm not getting a mousedown event detected. Would you know why that is? – NaN Aug 26 '13 at 21:51
As was mentioned before, are you sure your `tr` actually exists at the time you attach the mousedown handle? – Jordan Aug 26 '13 at 21:54
@Jordan. Now that, I'm not sure about. I'm using a plugin (datatables) so I'm not sure. Is there a way for me to tell? – NaN Aug 26 '13 at 22:00
@user1709311 put a break point at the line `$("#tbl1 tbody tr").mousedown(function(event) {` and enter your selector into the browser console. See if it has all the rows you expect. Datatables only puts the rows which are currently displayed on the page, so if you need it on rows which are on different pages, you will need to add the events whenever the table is redrawn, but make sure to check if the given row already has the event or not, or you may add multiple! I have worked with in the past, and it can be tough adding events to datatables :( Good luck! – Jordan Aug 26 '13 at 22:04
@user1709311 you should have stated that you were using `datatables` in your question. I still have no problems with the jsfiddle, that I posted, when right clicking on either of the `tr`'s. – Anthony Ledesma Aug 27 '13 at 17:51

Get the row id of html table after right click

4 Answers4