Gridview文本框焦点在垂直

Question

我需要在垂直运动中关注文本框

这是我的脚本：-

<asp:GridView ID="grddata" CssClass="grdCBS" runat="server" AutoGenerateColumns="False" HeaderStyle-Wrap="true" HeaderStyle-CssClass="gridHeadCBS" GridLines="Both">
    <FooterStyle CssClass="gridHeadCBS" />
        <RowStyle CssClass="gridRowStyleCBS" />
            <Columns>
                <asp:TemplateField HeaderText="Date">
                    <ItemTemplate>
                    <asp:Label ID="lbldate" BorderStyle="None" runat="server" Text='<%# Eval("DISPdate")%>' ReadOnly="true"></asp:Label>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Center" /><
                </asp:TemplateField>
                <asp:TemplateField HeaderText="EMP1" HeaderStyle-HorizontalAlign="Center"">
                    <HeaderTemplate>
                        <asp:LinkButton ID="EMP1" CommandArgument="1" CssClass="WrapText" TabIndex="1" runat="server" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:TextBox ID="txtEMP1" AutoPostBack="true" CssClass="WrapText" TabIndex="1" BorderStyle="None" runat="server"></asp:TextBox>
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                    <ItemStyle HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="EMP2" Visible="false" HeaderStyle-HorizontalAlign="Center">
                    <HeaderTemplate>
                        <asp:LinkButton ID="EMP2" CommandArgument="2" CssClass="WrapText" TabIndex="2" runat="server" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:TextBox ID="txtEMP2" AutoPostBack="true" CssClass="WrapText" TabIndex="2" BorderStyle="None" runat="server"></asp:TextBox>
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                    <ItemStyle HorizontalAlign="Center" />
                </asp:TemplateField>          
            </Columns>
        <HeaderStyle CssClass="gridHeadCBS"></HeaderStyle>
    <RowStyle CssClass="gridAltRowStyleCBS"></RowStyle>
</asp:GridView>

我需要通过按回车键垂直聚焦文本框 假设我有 3 行和 3 列然后按回车键

像这样。

from (1 row->1 td to 2 row->1 td) 
then (2 row->1 td to 3 row->1 td) 
then (3 row->1 td to 1 row->2 td)

这里是 jquery:-
它在 html 中有效，但在 gridview 中无效

        $('table input[type=text]').keypress(function (e) {
            if (e.keyCode === 13) {
                if ($(this).closest('tr').next().find('input').length>0) {
                  // when there is another row below
                  e.preventDefault();
                  $(this).closest('tr').next().children().eq($(this).closest('td').index()).find('input').focus();
                } else if ($(this).closest('tbody').find('tr:first').children().eq($(this).closest('td').index()+1).find('input').length>0) {
                  // when last row reached
                  e.preventDefault();
                  $(this).closest('tbody').find('tr:first').children().eq($(this).closest('td').index()+1).find('input').focus();
                }
                return false;
            }
        });

Answer 1

有一个使用纯javascript 的示例（解释存储在代码中以便于理解）：

//variable for current column in table
var col=0;
//get total columns in table
var cols=document.getElementById('grddata').rows[0].cells.length-1;
//get all textboxes in table
var tt=document.getElementById('grddata').querySelectorAll('input[type="text"]');
//set keypress event for every textbox in table
for(var i=0;i<tt.length;i++) {
  tt[i].setAttribute('onkeypress','nextTxt(this,event);');
}

//"walking" trought textboxes
function nextTxt(ele,e) {
  //again, get all textboxes in current column
  var tt=document.getElementById('grddata').querySelectorAll('td:nth-child('+(col+1).toString()+') input[type="text"]');
  //when Return/Enter is pressed :
  if(e.keyCode===13) {
    //loop trough all textboxes in current column searching from which one is pressed Return/Enter
  for(var i=0;i<tt.length;i++) {
    //when function find from which one textbox is called Return/Enter
    if(ele==tt[i]) {
      //if keypress event is called from textbox in last row of current column :
      if(i+1>tt.length-1) {
        //set row (in this case i) and move to next column of table
        i=0; col+=1;
        //if onkeypress event is called from very last one textbox, jump to very first one (1st row, 1st cell)
        if(col>cols) {col=0;}
        //get only textbox from 1st cell in 1st row of new selected row
        var ntxt=document.getElementById('grddata').querySelector('td:nth-child('+(col+1).toString()+') input[type="text"]');
        ntxt.focus();break;
      } else {
        //move to next textbox into same column
        i+=1;
        tt[i].focus();break;
      }
    }
  }
}
}

input[type="text"] {border:solid 1px black;background-color:white;color:black;}
input[type="text"]:focus {border:solid 1px navy;background-color:yellow;color:maroon;}

<table id="grddata" cellspacing="2">
  <tr>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
  </tr>
  <tr>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
  </tr>
  <tr>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
  </tr>
  <tr>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
  </tr>
</table>

更新：

将javascript 代码放在<asp:GridView... 之后非常重要，否则js 代码将不起作用，因为GridView 尚未呈现。