Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

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
?
109 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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…

705 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