How to highlight a table row with rightclick

Question

I have created a table using jquery. I can highlight a row when it selected by left click. I used this code for this....

 <script type='text/javascript'>
            $(document).ready(function() { 
                $("#tableData").delegate("tr", "click", function() {
                    $(this).addClass("selected").siblings().removeClass("selected"); 
                }); 
            });            
 </script>

Now I want to select a row and change the color with rightclick also.. Please any one help me...

this may help: http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery — 97ldave, May 23 '13 at 13:14

score 1 · Answer 1 · answered May 23 '13 at 13:18

1

You can use the contextmenu event:

$("#tableData").delegate("tr", "contextmenu", function(e) {
   alert('Context Menu event has fired!');
   //Do functionality here
   return false;
});

answered May 23 '13 at 13:18

97ldave

5,249
4
25
39

score 0 · Answer 2 · answered May 23 '13 at 13:14

You can use which property of the event object:

<script type='text/javascript'>
            $(document).ready(function() { 
                $("#tableData").delegate("tr", "mousedown", function(event) {
                    if(event.which == 3){
                        $(this).addClass("selected").siblings().removeClass("selected"); 
                    }
                }); 
            });            
 </script>

Here is an example: http://jsfiddle.net/Eknr6/

score 0 · Answer 3 · answered May 23 '13 at 13:35

You already "selected" your row, you can retrieve the currently selected row with :

$('tr.selected')

To change color just change your css according to your selected class, here some examples :

tr.selected{
    color:red;
}
tr.selected a{
    color:black;
}

you might also want to add this into your script :

event.stopPropagation();
event.preventDefault();

If you have any event under that they won't trigger for your click event (the event won't bubble up or down)

How to highlight a table row with rightclick

3 Answers3