Solved

How do i onmouseover in a tr check to see if a key was pressed

Posted on 2014-10-21
4
105 Views
Last Modified: 2014-10-21
I have a large table with a lot of data. I'm trying to basically check to see if a letter was pressed while someone was hovering over a tr. What i'm trying to do is basically black out the whole screen except for the hovered over row when someone presses the letter f so that it can basically just focus on that row. Easier to see in the midst of a lot of data. Here's what i got so far. Don't know if i'm in the right direction, but it's not detecting me pressing the letter. Also, if they press f again or esc or click outside the row, i'd like it to go back to normal. Hope this makes sense. Thanks guys/girls!

$(function(){

  $('#report tr').on('mouseover',function(){
    $('#report tr').removeClass('sel');
    $(this).addClass('sel');

    $(this).keypress(function(event){
      if(event==70){
        alert('hello');
      }
    });

  });

});

Open in new window

0
Comment
Question by:engineroom
  • 2
  • 2
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40394948
Try this :
$(function(){
  // http://api.jquery.com/hover/
  $('#report tr').hover(function(){ // mouseover
      $('#report tr').removeClass('sel');
      $(this).addClass('sel');
  }, function() { // mouseout
      $(this).removeClass('sel');
  });

 $('#report tr').keypress(function(event){
      if( event==70 && $('#report tr.sel').length > 0 ) { // if a row have class sel it's on mouseover
        alert('hello'); // /!\ should loss focus /!\
      }
 });

});

Open in new window

0
 
LVL 3

Author Comment

by:engineroom
ID: 40395313
That works, but doesn't seem to accomplish my goals. I need to basically add the .sel class to whatever row i'm currently hovered on when f is pressed. Hope this clears it up.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40395328
$(function(){
  // http://api.jquery.com/hover/
  $('#report tr').hover(function(){ // mouseover
      $('#report tr').removeClass('hovered');
      $(this).addClass('hovered');
  }, function() { // mouseout
      $(this).removeClass('hovered');
  });

 $('#report tr').keypress(function(event){
      if( event==70 && $('#report tr.hovered').length > 0 ) { // if a row have class sel it's on mouseover
        alert('hello'); // /!\ should loss focus /!\
        $(this).addClass("sel");
      }
 });

});

Open in new window

0
 
LVL 3

Author Closing Comment

by:engineroom
ID: 40395567
Thanks!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question