CODEWITHSUNDEEP
jqueryjquery-pluginsjquery-selectors
jgg
jgg

Reputation: 1136

How to navigate through table cells with tab key using JQuery?

I have a table as shown below. When I click a table cell(only cells with div element), it turns into a text field for editing(this I am doing another Jquery plugin). I am trying to acheive this using tab key, that is when I tab out from one cell, I want to go to next cell.

<table id="mytable">
   <tr> 
          <td><span><div>60</div></span></td> 
          <td><span>$10000</span></td>
          <td><span><div>100%</div></span></td>
   </tr>
</table>

Here is my Jquery code. This code is not working properly, that is when I tab out from first cell, I can see cursor in the next cell but it goes away immediatly. Anything wrong in this code?

$("#mytable tr td div").bind('keydown', function(event) {
  if(event.keyCode == 9){ //for tab key
    var currentDiv = event.target;
    $(currentDiv).parents("td").next("td").find("div").click();
}});

Upvotes: 0

Views: 7741

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074048

Adding return false; may help:

$("#mytable tr td div").bind('keydown', function(event) {
  if(event.keyCode == 9){ //for tab key
    var currentDiv = event.target;
    $(currentDiv).parents("td").next("td").find("div").click();
    return false; // <== here
  }
});

Adding it there means that if you're handling the keydown, you're telling the browser to stop the event from bubbling and to stop the default handling of the event, which may be interfering with what you're trying to do.

Upvotes: 6

Related Questions