Hi All,
         I am using jquery in one of my projects. I have a scenario where I have to add keyboard events to the td cells of a table to move up and down in them. I was able to achieve this using the following code.

1. <script type="text/javascript">
2.      var tds = jQuery("#myTable td");
3.      tds.bind('keyup', function(event){       
4.           var key = event.which;
5.           moveSelection(key, jQuery(this), tds);
6.           event.preventDefault();                       
7.      });
8.      function moveSelection(key, current_td, all_tds){   
9.         var index = parseInt(current_td.attr("id"));       
10.         if (key == 13) {
11.             current_td.click();
12.           } else if(key == 38) {             
13.             if(all_tds[index - 1]){
14.                 all_tds[index - 1].focus();
15.             }
16.           } else if(key == 40) {
17.               if(index < all_tds.length){
18.                 var next_index = index + 1;
19.                 if(next_index < all_tds.length){
20.                     all_tds[index + 1].focus();
21.                 }               
22.              }
23.         }           
24.     }   
25. </script>
26. 13=Enter, 38=PageUp, 40=PageDown.

This is how my table look like. This is an ajax response:

1. <table style="position:absolute;" id="myTable">
2.         <tr>
3.              <td tabindex="0" id="0">Users</td>
4.              <td tabindex="0" id="1">Cities</td>
5.              <td tabindex="0" id="2">Pages</td>
6.              <td tabindex="0" id="3">Links</td>
7.              <td tabindex="0" id="4">Guidelines</td>
8.              <td tabindex="0" id="5">FAQs</td>
9.              <td tabindex="0" id="6">Help</td>
10.         </tr>
11. </table>

I was able to move through the td cells if the page has no scroll bars. But when the page has scroll bars, when I use PageUp/PageDown keys two things happen.

1. My page scrolls up/down based on the key pressed.()
2. The respective td selection moves/up based on the key pressed.

In the first case, it might be because of the events are bound to the page as well as my table tds. How ca I prevent this. I dont want my page to scroll when I am dealing with my table. I tried a lot but failed. Looking here for some help.


Please find the screenshot in the attachment.