將焦點移動到GridView中的下一個文本框上按鈕單擊（或按Ctrl +向下箭頭）

Question

我使用的是帶有最新版本jQuery的asp.net Web窗體4.0。 我的頁面包含多個按鈕和輸入。

我想要做的是將重點放在gridview中的下一個輸入字段。這個輸入字段有一個特定的類。只有在點擊按鈕或按下Ctrl +向下箭頭時，行爲纔會起作用。

我gridview的類是GridView，我輸入的類是toControl。 所以這創建了一個帶有class =「GridView」的表格。有些行具有帶有class =「toControl」的輸入的td。

我已經嘗試了幾個與.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一個鏈接，顯示這JS代碼的工作在你的榜樣HTML表格：http://jsfiddle.net/kKhS2/