单击按钮(或ctrl+向下箭头)，将焦点移动到GridView中的下一个文本框

Question

我使用的是带有最新版本jQuery的asp.net web表单4.0。我的页面由几个按钮和输入组成。

我想做的是将焦点设置在网格视图中的下一个输入字段上。此输入字段有一个特定的类。只有当点击按钮或按下ctrl+向下箭头时，这种行为才会起作用。

我的gridview的类是gridview，输入的类是toControl。因此，这将创建一个带有行的class="GridView"表。有些行有一个td，其输入为class="toControl"。

我已经尝试过使用.next、.nextAll甚至索引的一些方法，但我猜我正在寻找一些特定的解决方案。

我为按钮和点击事件使用的两个功能是：

$(document).keydown(function (e) {
        if (e.keyCode == 40 && e.ctrlKey) {
            e.preventDefault();
            NextError();
        }
    });
$('#ButtonNext').on('click', function () {
    NextError();
});

NextError功能：

 function NextError() {
                $('.GridView .toControl:first').focus();
  }

现在显示下一个错误字段，重点是GridView中的第一个toControl。此代码有效。然而，当我按照下面的代码行尝试一些东西时，它不起作用。

$('.GridView .toControl').next().focus();

因此，即使是基本功能也不起作用。如果我能解决这个问题，我甚至不得不更进一步。当用户用toControl填充输入时，就会丢失该类。由于这很困难，我想通过用一个经过验证的类来否定它来解决这个问题。

那么我到底做错了什么呢？我已经搜索了很多stackoverflow问题，但第一个焦点是我最接近的。

编辑：根据要求，我添加了gridview生成的html。

<table class="GridView" id="MainContent_GridView1" style="border-width: 0px; border-collapse: collapse;" rules="all" cellspacing="0">
        <tbody>
<tr class="errorRow" onclick="ShowCase(image link,image link)">
            <td>0003_CASE1</td><td>1</td><td>1</td><td>
                            <input name="ctl00$MainContent$GridView1$ctl02$GridViewValidate" class="toControl" id="MainContent_GridView1_GridViewValidate_0" type="number">
                        </td>
        </tr><tr>
            <td>0003_CASE2</td><td>2</td><td>1</td><td>
                            <input name="ctl00$MainContent$GridView1$ctl03$GridViewValidate" disabled="disabled" class="aspNetDisabled" id="MainContent_GridView1_GridViewValidate_1" type="number">
                        </td>
        </tr><tr class="errorRow" onclick="ShowCase('image link,image link)">
            <td>0003_CASE3</td><td>3</td><td>1</td><td>
                            <input name="ctl00$MainContent$GridView1$ctl04$GridViewValidate" class="toControl" id="MainContent_GridView1_GridViewValidate_2" type="number">
                        </td>
        </tr><tr>
            <td>0003_PAGE3</td><td>3</td><td>1</td><td>
                            <input name="ctl00$MainContent$GridView1$ctl05$GridViewValidate" disabled="disabled" class="aspNetDisabled" id="MainContent_GridView1_GridViewValidate_3" type="number">
                        </td>
        </tr>
    </tbody></table>

Answer 1

我会获取所有符合您的标准的输入，然后只需跟踪您在"ctrl+down"按键之间的位置。

基本上，它的作用是在jQuery对象"errorControls"中保留所有"toControl"控件的列表，并使用index变量跟踪该输入列表中的当前索引。

每次调用NextError时，索引都会递增。如果它是列表中的最后一个元素，则"index"将设置回零。

这是代码：

var errorControls;
var index = 0;
$(document).keydown(function (e) {
    if (e.keyCode == 40 && e.ctrlKey) {
        e.preventDefault();
        NextError();
    }
});
$('#ButtonNext').on('click', function () {
    NextError();
});
// This function loads all the "toControl" controls 
// into an array on page load
$(function () {
    errorControls = $('.GridView .toControl');
});
function NextError() {
    errorControls[index].focus();
    index = index + 1;
    if(index >= errorControls.length) {
        index = 0;
    }
}

这里有一个指向JSFiddle的链接，显示了在示例HTML表上工作的JS代码：http://jsfiddle.net/kKhS2/