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 c开发者_如何学Goell, 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();
}});

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.