Как использовать клавишу со стрелкой, чтобы перейти в другое текстовое поле в gridview

Question

У меня есть gridview, в котором у меня есть 3 текстовых поля в каждой строке. Если я нажимаю стрелку вниз, она должна перейти к следующей строке текстового поля. Если я нажимаю клавишу uparrow, тогда она должна перейти в предыдущее текстовое поле. То же самое для левой и правой клавиши со стрелкой.

Это мой код.

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     $("body").keydown(function (e) { 
      var row; 
      debugger; 
      if (e.keyCode == 39) { 
       row = $(this).closest('td').next(); 
       row.find('input').focus(); 
      } 
      else if (e.keyCode == 37) { 
       row = $(this).closest('td').prev(); 
       row.find('input').focus(); 
      } 
      else if (e.keyCode == 40) //down arrow key code 
      { 
       row = $(this).closest('tr').next(); 
       row.closest('td').next().find('.masked').focus(); 
      } 
      else if (e.keyCode == 38) // up arrow key code 
      { 
       row = $(this).closest('tr').next(); 
       row.closest('td').prev().find('.masked').focus(); 
      } 
     }); //this code detect is it up or down arrow 
    }); 

</script> 

HTML полученный код

' <tr> 
<td style="width:1%;"> 
<td style="width:3%;"> 
<td style="width:3%;"> 
<td style="width:3%;"> 
<td style="width:3%;"> 
<td style="width:5%;"> 
<input id="ContentPlaceHolderMain_grdDistanceLog_txttime_0" class="masked ui-mask" type="text" style="width:50px;display:block;" maxlength="8" name="ctl00$ContentPlaceHolderMain$grdDistanceLog$ctl02$txttime"> 
<span id="ContentPlaceHolderMain_grdDistanceLog_lbltime_0" style="display:none;"></span> 
</td> 
<td style="width:3%;"> 
<td style="width:3%;"> 
<td style="width:3%;"> 
<td style="width:3%;"> 
<td style="width:7%;"> 
<td style="width:3%;"> 
<td style="width:4%;"> 
</tr> 
<tr class="alt"> 
<td style="width:1%;"> 
<td style="width:3%;"> 
<td style="width:3%;"> 
<td style="width:3%;"> 
<td style="width:3%;"> 
<td style="width:5%;"> 
<input id="ContentPlaceHolderMain_grdDistanceLog_txttime_1" class="masked ui-mask" type="text" style="width:50px;display:block;" maxlength="8" name="ctl00$ContentPlaceHolderMain$grdDistanceLog$ctl03$txttime"> 
<span id="ContentPlaceHolderMain_grdDistanceLog_lbltime_1" style="display:none;"></span> 
</td> 
<td style="width:3%;">' 

Answer 1

без HTML это больше догадок, чем это могло бы быть, но похоже row.closest ('тд'). Следующий() не получает TD ты ищешь.

Try: ...

{ 
    row = $(this).closest('tr').next(); 
    row.find('td').find('.masked').focus(); 
} 
else if (e.keyCode == 38) // up arrow key code 
{ 
    row = $(this).closest('tr').next(); 
    row.find('td').find('.masked').focus(); 
} 

Edit: С HTML на месте, мне кажется, как вопрос на руке $ (это) не будучи в настоящее время ваш целенаправленный элемент, как вы ожидаете а скорее $ (документ), в котором вы запускаете событие keydown. Сначала попробуйте выбрать сфокусированный элемент:

$(document).ready(function() { 
    $("body").keydown(function (e) { 
     var row; 
     var focusedElement = $(document.activeElement); 
     debugger; 
     if (e.keyCode == 39) { 
      row = $(focusedElement).closest('td').next(); 
      row.find('input').focus(); 
     } 
     else if (e.keyCode == 37) { 
      row = $(focusedElement).closest('td').prev(); 
      row.find('input').focus(); 
     } 
     else if (e.keyCode == 40) //down arrow key code 
     { 
      row = $(focusedElement).closest('tr').next(); 
      row.find('td').find('.masked').focus(); 
     } 
     else if (e.keyCode == 38) // up arrow key code 
     { 
      row = $(focusedElement).closest('tr').next(); 
      row.find('td').find('.masked').focus(); 
     } 
    }); 
});