我正在使用VS 2005，ASP.NET，C＃.NET和JQUERY。 我在更新面板中有gridview。 我有一个单元格的tab索引$（this）.attr（'tabIndex'） 我必须将焦点移到下一个可编辑单元格。 如何找到下一个单元格的选项卡索引，并在按箭头键时对其进行焦点
提前谢谢 george n t <%@ Page Language="C#" AutoEventWireup="true" CodeFile="frmPLEntryMonthWise.aspx.cs" Inherits="frmPLEntryMonthWise" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>P & L Entry - All Account (Cumulative)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.GVFixedHeader { font-weight:bold; border-width:1px 1px;border:solid #d3d3d3; position:relative; top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);}
</style>
<script language="javascript" type="text/javascript">
function getScrollBottom(p_oElem)
{
return p_oElem.scrollHeight - p_oElem.scrollTop - p_oElem.clientHeight;
}
</script>
<link href="includes/text.css" type="text/css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="includes/jquery.js">function DIV1_onclick() {}
</script>
<style type="text/css">
.container {
width:900px;
height:1000px;
overflow:hidden;
padding:20px;
}
</style>
<script type="text/javascript" src="includes/plBooking.js"> function isNumberKey() {}</script>
<script type="text/javascript" src="includes/plBooking.js">function checkBlankPressTab() {}</script>
<script type="text/javascript" src="includes/plBooking.js">function checkBlankPressOnblur() {}</script>
<script type="text/javascript" src="includes/plBooking.js"> function checkValidNo(){}</script>
<script type="text/javascript" src="includes/plBooking.js"> function fnSum(){}</script>
<script type="text/javascript" src="includes/plBooking.js">function fnRound(){}</script>
<script type="text/javascript" src="includes/plBooking.js"> function isNumberKey1(){}</script>
<script type="text/javascript" src="includes/plBooking.js"> function isNumberKey2(){}</script>
<script type="text/javascript" src="includes/plBooking.js">function appendZero(){ }</script>
<script type="text/javascript" src="includes/plBooking.js"> function validate_Save(){}</script>
<script src="JQuery/jquery-1.4.1.js" type="text/javascript"></script>
<script src="JQuery/jquery.keynavigation.js" type="text/javascript"></script>
<%-- <script language="javascript" type="text/javascript">
$(document).ready(function() {
//For navigating using left and right arrow of the keyboard
var gridview = $("#grdView");
$.keynavigation(gridview);
});
</script>--%>
<script language="javascript" type="text/javascript">
$("body").keydown(function(e) {
alert('hi');
if(e.keyCode == 40) { // down
$(':focus').nextAll(':has(["tabIndex"]):not([tabIndex=-1])').focus();
}
else if(e.keyCode == 38) { // up
$(':focus').prevAll(':has(["tabIndex"]):not([tabIndex=-1])').focus();
}
else if(e.keyCode == 37) { // left
$(':focus').prevAll(':has(["tabIndex"]):not([tabIndex=-1])').focus();
}
else if(e.keyCode == 39) { // right
$(':focus').prevAll(':has(["tabIndex"]):not([tabIndex=-1])').focus();
}
});
</script>
<%--<script type="text/javascript" src="includes/plBooking.js"> function fnShowTotal(){}</script>--%>
<%--<link href="cal/popcalendar.css" rel="stylesheet" type="text/css" />--%>
</head>
<body id="body" runat="server" onkeydown="">
<form id="Form1" runat="server" >
<div class="container" id="DIV1" onclick="return DIV1_onclick()" style="width: 1219px; height: 540px;" >
<asp:ScriptManager id="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/FixFocus.js" />
</Scripts>
</asp:ScriptManager>
<div >
<asp:Label ID="lblDetails" runat="server" Font-Bold="True" ForeColor="Black" Text="Company Name" Width="1080px"></asp:Label>
<asp:Label ID="lblExRate" runat="server" Font-Bold="True" ForeColor="Black" Text="Exchange Rate" ></asp:Label>
<table style="height: 325px; width: 98%;" >
<tr>
<td align="left" colspan="4" valign="top" style="width: 682px; height: 243px;"><strong></strong>
<div style="height:340px; width:1198px; overflow-y:scroll; overflow: auto;">
<asp:UpdatePanel id="UpdatePanel1" runat="server" ><contenttemplate>
<asp:GridView ID="grdView" runat="server" Width="900px" AutoGenerateColumns="False" ShowFooter="True" CssClass="grid" DataKeyNames="accCode" style="overflow: scroll" OnRowDataBound="grdView_RowDataBound" >
<HeaderStyle CssClass="GVFixedHeader" />
<FooterStyle CssClass="GVFixedFooter" />
<Columns>
<asp:TemplateField HeaderText="Acc.No." >
<ItemStyle Width="70px" />
<ItemTemplate>
<asp:Label ID="lblAccCode" runat="server" Text='<%# Eval("accUserCode") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
<ControlStyle Width="70px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="P & L Account Name">
<ItemStyle Width="190px" />
<ItemTemplate>
<asp:Label ID="lblAccName" runat="server" Text='<%# Eval("accName") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtTotal" Width="190px" runat="server" Font-Bold="true" Font-Size="Medium" style="text-align:right;" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" Text="Total" ></asp:TextBox>
</FooterTemplate>
<ControlStyle Width="190px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="D">
<ItemStyle Width="10px" />
<ItemTemplate>
<asp:Label ID="lblDeprec" runat="server" ></asp:Label>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
<ControlStyle Width="10px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="B">
<ItemStyle Width="10px" />
<ItemTemplate>
<asp:Label ID="lblProv" runat="server" ></asp:Label>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
<ControlStyle Width="10px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="C">
<ItemStyle Width="10px" />
<ItemTemplate>
<asp:Label ID="lblCons" runat="server" ></asp:Label>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
<ControlStyle Width="10px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="M-1 Cumul." >
<HeaderTemplate>
<asp:Label Width="60px" ID="lblHCumul" runat="server" Text="<%# fillHeaderCumul() %> " ></asp:Label>
</HeaderTemplate>
<ItemStyle Width="60px" />
<ItemTemplate>
<asp:TextBox Width="60px" ID="lblPCum" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" Text='<%# Eval("PCum") %>' TabIndex="-1" ></asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="lblFPCum" Width="60px" style="text-align:right;" Font-Bold="true" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" />
</FooterTemplate>
<ControlStyle Width="60px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Budget">
<HeaderTemplate>
<asp:Label Width="60px" ID="lblHBudget" runat="server" Text='<%# fillHeaderBudget() %>'></asp:Label>
</HeaderTemplate>
<ItemStyle Width="60px" />
<ItemTemplate>
<asp:TextBox Width="60px" ID="lblMBudget" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" Text='<%# Eval("MBudget") %>' TabIndex="-1"></asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="lblFMBudget" Width="60px" style="text-align:right;" Font-Bold="true" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" />
</FooterTemplate>
<ControlStyle Width="60px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="P & L As Per Book">
<ItemStyle Width="80px" BackColor="White"/>
<ItemTemplate>
<asp:TextBox Width="80px" ID="txtPL" runat="server" text='<%# Eval("PL") %>' BorderStyle="None" BorderColor="white" >
</asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<%--<asp:TextBox ID="lblFPL" runat="server" />--%>
<asp:TextBox ID="lblFPL" Width="80px" style="text-align:right;" Font-Bold="true" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" />
</FooterTemplate>
<ControlStyle Width="80px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Adjustments">
<ItemStyle Width="80px" BackColor="White"/>
<ItemTemplate>
<asp:TextBox Width="80px" ID="txtCorrection" runat="server" text='<%# Eval("Correction") %>' BorderStyle="None" BorderColor="white" >
</asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="lblFCorrection" Width="80px" style="text-align:right;" Font-Bold="true" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" />
</FooterTemplate>
<ControlStyle Width="80px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Cumul.">
<HeaderTemplate>
<asp:Label Width="60px" ID="lblHMCumul" runat="server" Text="<%# fillHeaderMonthCumul() %> "></asp:Label>
</HeaderTemplate>
<ItemStyle Width="60px" />
<ItemTemplate>
<asp:TextBox Width="60px" ID="lblMCum" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" Text='<%# Eval("MCum") %>' TabIndex="-1"></asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="lblFMCum" Width="60px" style="text-align:right;" Font-Bold="true" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" />
</FooterTemplate>
<ControlStyle Width="60px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Month Actual">
<ItemStyle Width="60px" />
<ItemTemplate>
<asp:TextBox Width="60px" ID="lblDiffAmt" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" Text='<%# Eval("DAmt") %>' TabIndex="-1"></asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="lblFDAmt" Width="60px" style="text-align:right;" Font-Bold="true" ReadOnly="true" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" />
</FooterTemplate>
<ControlStyle Width="60px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Var. In %">
<ItemStyle Width="60px" />
<ItemTemplate>
<asp:TextBox Width="60px" ID="lblDiffPcnt" BorderStyle="none" BorderColor="honeydew" BackColor="honeyDew" runat="server" Text='<%# Eval("DPcnt") %>' TabIndex="-1"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Remarks" >
<ItemStyle Width="195px" BackColor="White" />
<ItemTemplate>
<asp:TextBox Width="195px" ID="txtComment" runat="server" text='<%# Eval("Comment") %>' BorderStyle="None" BorderColor="white" >
</asp:TextBox>
<asp:HiddenField ID="HFaccCode" runat="server" Value='<%# Eval("accCode") %>' />
<asp:HiddenField ID="HFprovision" runat="server" Value='<%# Eval("provision") %>' />
<asp:HiddenField ID="HFdepreciation" runat="server" Value='<%# Eval("depreciation") %>' />
<asp:HiddenField ID="HFconsolidation" runat="server" Value='<%# Eval("consolidation") %>' />
<asp:HiddenField ID="HFaccType" runat="server" Value='<%# Eval("accAccType") %>' />
<asp:HiddenField ID="HFplentryCurrentMonthstatus" runat="server" Value='<%# Eval("plentryCurrentMonthstatus") %>' />
</ItemTemplate>
<ControlStyle Width="195px" />
</asp:TemplateField>
<asp:BoundField DataField="provision" HeaderText="provision" Visible="False" />
<asp:BoundField DataField="accCode" HeaderText="provision" Visible="False" />
</Columns>
</asp:GridView></contenttemplate>
</asp:UpdatePanel>
</div>
</td>
</tr>
</table>
</div>
<tr>
<td colspan="2" style="height: 15px">  
<strong><asp:Label ID="lblName" runat="server" Text="Version : "></asp:Label></strong>
<asp:TextBox ID="txtVersion" runat="server" CssClass="txt" Width="100px" ReadOnly="true"></asp:TextBox>
</td>
<td align="center" style="width: 100px; height: 15px">
</td>
</tr>
<table >
<tr>
<td colspan="2" style="height: 27px">
<asp:HyperLink ID="hlBack" runat="server" NavigateUrl="~/frmPL.aspx" Font-Underline="True">Back</asp:HyperLink>
<strong><asp:Label ID="Label3" runat="server" Text="D -" ></asp:Label></strong>
<asp:Label ID="Label4" runat="server" ForeColor="blue" Text="Cash Flow Account" Width="130px" style="left: 8px; position: relative; top: 0px"></asp:Label>
<strong><asp:Label ID="Label1" runat="server" Text="B -" ></asp:Label></strong>
<asp:Label ID="Label2" runat="server" ForeColor="blue" Text="Budget Account" Width="120px" style="left: 8px; position: relative; top: 0px"></asp:Label>
<strong><asp:Label ID="Label7" runat="server" Text="C -" ></asp:Label></strong>
<asp:Label ID="Label8" runat="server" ForeColor="Blue" Text="Consolidation Account" Width="132px" style="left: 8px; position: relative; top: 0px"></asp:Label>
<strong> <asp:Label ID="Label20" runat="server" Text="Var. in % - "></asp:Label></strong>
<asp:Label ID="Label6" runat="server" ForeColor="blue" Text="Difference between Month Actual and Cumul Previous Months" ></asp:Label>
<%--<strong><asp:Label ID="Label5" runat="server" Text="Var. -" ></asp:Label></strong>
<asp:Label ID="Label6" runat="server" ForeColor="blue" Text="Difference between current month and previous month" ></asp:Label>--%>
<asp:Label ID="lblError" runat="server" ForeColor="Red" Text="Error" Width="224px" style="left: 8px; position: relative; top: 0px"></asp:Label>
</td>
<td align="center" style="width: 100px; height: 46px">
</td>
<td align="center">
<asp:Button ID="btnShow" runat="server" CssClass="button" Text="Show Total" Width="100px" OnClick="btnShow_Click" /></td>
<td align="center" style="width: 100px; height: 27px">
<asp:Button ID="btnSave" runat="server" CssClass="button" OnClick="btnSave_Click"
Text="Save" Width="100px" /><%-- <asp:Button ID="btnExit" runat="server" CssClass="button" OnClick="btnExit_Click"
Text="Exit" Width="100px" /> --%></td>
</tr>
</table>
</div>
</form>
</body>
</html>
答案 0 :(得分：0)
使用attr tabIndex：
捕获向上/向下+切换到下一个/上一个单元格$("body").keydown(function(e) {
if(e.keyCode == 40) { // down
$(':focus').nextAll(':has(["tabIndex"]').focus();
}
else if(e.keyCode == 38) { // up
$(':focus').prevAll(':has(["tabIndex"]').focus();
}
});
<强>更新 更新选择器以忽略-1 tabindex
$("body").keydown(function(e) {
if(e.keyCode == 40) { // down
$(':focus').nextAll(':has(["tabIndex"]):not([tabIndex=-1])').focus();
}
else if(e.keyCode == 38) { // up
$(':focus').prevAll(':has(["tabIndex"]):not([tabIndex=-1])').focus();
}
});
<强>更新 请看这个小提琴： http://jsfiddle.net/6a6e6/
$(document).ready(function () {
$("body").keydown(function (e) {
if (e.keyCode == 40) { // down
$(':focus').nextAll('input:not([tabIndex=-1]):first').focus()
} else if (e.keyCode == 39) { //right
$(':focus').nextAll('input:not([tabIndex=-1]):first').focus()
} else if (e.keyCode == 38) { //up
$(':focus').prevAll('input:not([tabIndex=-1]):first').focus()
} else if (e.keyCode == 37) { //left
$(':focus').prevAll('input:not([tabIndex=-1]):first').focus()
}
});
});
<强>更新
要使用GridView，你必须将TabIndex添加到你的网格模板定义中的实际asp：textbox中 - TabIndex =“1”/ etc .. 例如：
<ItemTemplate>
<asp:TextBox Width="80px" ID="txtCorrection" runat="server" text="whatever" BorderStyle="None" BorderColor="white" TabIndex="1" >
</asp:TextBox>
</ItemTemplate>
我在asp应用程序中尝试过，它将大小写更改为小写，因此您必须更新keydown函数以包含：
if (e.keyCode == 40) { // down
$(':focus').nextAll('input:not([tabindex=-1]):first').focus()
} else if (e.keyCode == 39) { //right
$(':focus').nextAll('input:not([tabindex=-1]):first').focus()
} else if (e.keyCode == 38) { //up
$(':focus').prevAll('input:not([tabindex=-1]):first').focus()
} else if (e.keyCode == 37) { //left
$(':focus').prevAll('input:not([tabindex=-1]):first').focus()
}