Javascript 如何使用箭头键转到gridview中的不同文本框

我有一个gridview，每行有3个文本框。 若我按下向下箭头键，它将转到下一行文本框 如果我按向上箭头键，它将转到上一行文本框。 左右箭头键相同

这是我的密码

<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>

$（文档）.ready（函数（）{
$（“正文”）.keydown（函数（e）{
var行；
调试器；
如果（e.keyCode==39）{
行=$（this）.closest（'td'）.next（）；
row.find（'input'）.focus（）；
}
否则如果（e.keyCode==37）{
行=$（this）.closest（'td'）.prev（）；
row.find（'input'）.focus（）；
}
else if（e.keyCode==40）//向下箭头键代码
{
行=$（this）.closest（'tr'）.next（）；
row.closest（'td'）.next（）.find（'.masked'）.focus（）；
}
else if（e.keyCode==38）//向上箭头键代码
{
行=$（this）.closest（'tr'）.next（）；
行。最近（'td'）.prev（）.find（'.masked'）.focus（）；
}
})；//此代码检测是向上还是向下箭头
});

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%;">'

'
'

如果没有HTML，这比可能的猜测要多，但它看起来像row.nest（'td'）。next（）没有得到您要查找的td

尝试：

编辑： 有了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();
        }
    });
});

---

建议为所有文本框提供一个顺序id，这样您可以更轻松地使用jQuery代码。这将如何更轻松？你能举个例子吗？你能展示你的衍生HTML代码吗？使用变量存储当前聚焦ID，然后+1或-1取决于按下的箭头键。tab=row.find（'td'）。next（）。find（'input'）。focus（）；tab=tab+1；我添加了一些代码，假设问题是上下文中对$（this）的错误解释。非常感谢@spork，非常接近。这是我第一次尝试下一行的第二个文本框。在那之后，它工作得很好。所以我把这个标记为答案。谢谢

$(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();
        }
    });
});