Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2014-10-21
4
Medium Priority
?
113 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 83

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 83

Accepted Solution

by:
leakim971 earned 2000 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

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

564 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