关于Gridview键盘事件响应问题

要求效果跟以下html文件效果相同html源码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0048)http://222.35.23.134:81/zkhis/his/bgt/mzsfys.asp -->
<HTML><HEAD><TITLE>医生查询</TITLE>
<META content="MSHTML 6.00.2800.1106" name=GENERATOR>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META http-equiv=expires content=0>
<SCRIPT language=jscript src="医生查询.files/Utility.js"></SCRIPT><STYLE type=text/css>FONT {
CURSOR: default
}
</STYLE><SCRIPT language=javascript id=clientEventHandlersJS>
<!--
//------------------全局变量-------------------------
var preColor="#e8e9fc"; //保存行原来的颜色
var selectedItem; //选定的行//---------------------------------------------------
//--------------funtion selectItem-------------------
// 选定一行
//---------------------------------------------------
function selectItem(item,selected) {
var aitem = item;
if (aitem !=null && aitem.item == "1"){
while(aitem.tagName != "TR"){
aitem = aitem.parentElement;
}
if(selected){
aitem.bgColor = "#0101aa";
aitem.style.color = "#ffffff";
selectedItem = aitem;//当前选中的行
}
else{
aitem.bgColor="#e8e9fc";
aitem.style.color = "#000000";
selectedItem = null;
}
preColor =aitem.bgColor;
}
}function document_onmouseover() {
var aitem = event.toElement;
if(aitem.item == "1"){
while(aitem.tagName != "TR"){
aitem = aitem.parentElement;
}
preColor = aitem.bgColor;
aitem.bgColor = dispColor(preColor,20);
}
}function document_onmouseout() {
var aitem = event.fromElement;
if(aitem.item == "1"){
while(aitem.tagName != "TR"){
aitem = aitem.parentElement;
}
aitem.bgColor = preColor;
}
}function document_onclick() {
selectItem(selectedItem,false);//清空上一次选中的状态
selectItem(event.srcElement,true);}
function TR_ondblclick(){
   //alert(selectedItem.item);
if(selectedItem.item == "1"){
var ysbm=selectedItem.cells("ysbm").ysbm;
var xm=selectedItem.cells("xm").innerText;
var ksbm=selectedItem.cells("ysbm").ksbm;
window.returnValue = new Array(ysbm,xm,ksbm);
        window.close();
}
}
function btnCancel_onclick() {
window.close();
}
function document_onkeydown() {
if (selectedItem!=null){
//alert(selectedItem.line);
var line=parseInt(selectedItem.line);//从0计
var upline=line-1;
var downline=line+1;
var lineNum=parseInt(document.all("lineNum").value)-1;//总行数减一
if (line>0)
   upline=line-1
else
   upline=line
if (line<lineNum)
   downline=line+1;
else
   downline=line

if (event.keyCode==13){//回车返回值
    selectedItem.ondblclick();
    //alert("dd");
}
//alert(event.keyCode);
if (event.keyCode==38){//向上方向箭
selectItem(selectedItem,false);
selectItem(document.all("row"+upline.toString()),true);

}
if (event.keyCode==40){//向下方向箭
selectItem(selectedItem,false);
selectItem(document.all("row"+downline.toString()),true);
}
}
}
function window_onload(){
//alert(document.all("row0"))
if (document.all("row0")=="[object]"){
   selectItem(document.all("row0"),true);
}else{
btnCancel.focus();
}

}
//-->
</SCRIPT><SCRIPT language=javascript event=onclick for=oTable>
<!--
 document_onclick()
//-->
</SCRIPT><SCRIPT language=javascript event=onkeydown for=document>
<!--
 document_onkeydown()
//-->
</SCRIPT>
</HEAD>
<BODY bgColor=#c0c0c0 onload=window_onload()><BR><BR>
<TABLE id=Table1 cellSpacing=0 cellPadding=0 align=center border=0>
  <TBODY>
  <TR>
    <TD width=10 background=医生查询.files/circle1.gif height=10></TD>
    <TD background=医生查询.files/top.gif></TD>
    <TD width=10 background=医生查询.files/circle2.gif height=10></TD></TR>
  <TR>
    <TD width=10 background=医生查询.files/left.gif></TD>
    <TD align=middle bgColor=#c0c0c0>
      <TABLE id=oTable style="MARGIN: 15px" cellSpacing=1 cellPadding=3 
      align=center bgColor=gray border=0 name="oTable">
        <TBODY>
        <TR bgColor=#b0b0c5 height=30>
          <TD noWrap align=middle width="10%"><FONT face=黑体>编码</FONT></TD>
          <TD noWrap align=middle width="10%"><FONT face=黑体>姓名</FONT></TD>
          <TD noWrap align=middle width="10%"><FONT face=黑体>性别</FONT></TD>
          <TD style="DISPLAY: none" noWrap align=middle width="13%"><FONT 
            face=黑体>职称</FONT></TD>
          <TD noWrap align=middle width="13%"><FONT face=黑体>职称</FONT></TD>
          <TD noWrap align=middle width="13%"><FONT face=黑体>科室</FONT></TD></TR>
        <TR language=javascript id=row0 ondblclick=TR_ondblclick() 
        style="CURSOR: hand" bgColor=#e8e9fc item="1" line="0">
          <TD id=ysbm item="1" ysbm="2239" ksbm="13">104 </TD>
          <TD id=xm noWrap item="1">赵蕊</TD>
          <TD id=xb noWrap item="1">女</TD>
          <TD id=zc style="DISPLAY: none" noWrap item="1">1</TD>
          <TD id=zcmc noWrap item="1">主任医师</TD>
          <TD id=ksmc noWrap item="1">内一科 </TD></TR>
        <TR language=javascript id=row1 ondblclick=TR_ondblclick() 
        style="CURSOR: hand" bgColor=#e8e9fc item="1" line="1">
          <TD id=ysbm item="1" ysbm="2251" ksbm="01">132 </TD>
          <TD id=xm noWrap item="1">欧阳</TD>
          <TD id=xb noWrap item="1">男</TD>
          <TD id=zc style="DISPLAY: none" noWrap item="1">1</TD>
          <TD id=zcmc noWrap item="1">主任医师</TD>
          <TD id=ksmc noWrap item="1">西药库 </TD></TR>
        <TR language=javascript id=row2 ondblclick=TR_ondblclick() 
        style="CURSOR: hand" bgColor=#e8e9fc item="1" line="2">
          <TD id=ysbm item="1" ysbm="2254" ksbm="14">121 </TD>
          <TD id=xm noWrap item="1">王外</TD>
          <TD id=xb noWrap item="1">男</TD>
          <TD id=zc style="DISPLAY: none" noWrap item="1"></TD>
          <TD id=zcmc noWrap item="1"></TD>
          <TD id=ksmc noWrap item="1">外一科 </TD></TR>
        <TR language=javascript id=row3 ondblclick=TR_ondblclick() 
        style="CURSOR: hand" bgColor=#e8e9fc item="1" line="3">
          <TD id=ysbm item="1" ysbm="2255" ksbm="13">150 </TD>
          <TD id=xm noWrap item="1">医生甲</TD>
          <TD id=xb noWrap item="1">女</TD>
          <TD id=zc style="DISPLAY: none" noWrap item="1"></TD>
          <TD id=zcmc noWrap item="1"></TD>
          <TD id=ksmc noWrap item="1">内一科 </TD></TR></TBODY></TABLE>
      <CENTER><INPUT id=lineNum type=hidden value=4 name=lineNum><BUTTON 
      language=javascript id=btnCancel 
      onclick="return btnCancel_onclick()">关闭窗口</BUTTON> </CENTER></TD>
    <TD width=10 background=医生查询.files/right.gif></TD></TR>
  <TR>
    <TD width=10 background=医生查询.files/circle4.gif height=10></TD>
    <TD background=医生查询.files/top.gif></TD>
    <TD width=10 
background=医生查询.files/circle3.gif></TD></TR></TBODY></TABLE></BODY></HTML>

解决方案 »

  1.   

    把这段代码放在保存成html文件中就知道了，我想在gridview中实现这个功能
    “↑”：上移一条记录“↓”：下移一条记录
      

  2.   

    给你做了一个，你看看效果，应该和你的差不多。复制下去就可以运行：
    //=====在页面   Default2.aspx==========<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!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 runat="server">
        <title>无标题页</title>
    </head>
    <body bgColor="#c0c0c0" onload="window_onload()">
        <form id="form1" runat="server">
        <div>
        
        </div>
            <asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound" >
            </asp:GridView>
            <CENTER><INPUT id=lineNum type=hidden value=<%=i %> name=lineNum><BUTTON 
          language=javascript id=btnCancel 
          onclick="return btnCancel_onclick()">关闭窗口</BUTTON> </CENTER>
        </form>
    </body>
    </html>
    <SCRIPT language="javascript" id="clientEventHandlersJS">
    <!--
    //------------------全局变量-------------------------
    var preColor="#e8e9fc"; //保存行原来的颜色
    var selectedItem; //选定的行//---------------------------------------------------
    //--------------funtion selectItem-------------------
    // 选定一行
    //---------------------------------------------------
    function selectItem(item,selected) {
    var aitem = item;
    if (aitem !=null && aitem.item == "1"){
    while(aitem.tagName != "TR"){
    aitem = aitem.parentElement;
    }
    if(selected){
    aitem.bgColor = "#0101aa";
    aitem.style.color = "#ffffff";
    selectedItem = aitem;//当前选中的行
    }
    else{
    aitem.bgColor="#e8e9fc";
    aitem.style.color = "#000000";
    selectedItem = null;
    }
    preColor =aitem.bgColor;
    }
    }function document_onmouseover(o) {        o.bgColor = "#e8f9fc";
            o.style.color = "#000000";
    }function document_onmouseout(o) {    if(o!=selectedItem)
        {
            o.bgColor = "#e8e9fc";
            o.style.color = "#000000";
        }
            else
        {
            o.bgColor = "#0101aa";
            o.style.color = "#ffffff";
        }
    }function document_onclick(o) {
    selectItem(selectedItem,false);//清空上一次选中的状态
    selectedItem=o;
    selectItem(selectedItem,true);}
    function TR_ondblclick(){
       //alert(selectedItem.item);
    if(selectedItem.item == "1"){
    var ysbm=selectedItem.cells("ysbm").ysbm;
    var xm=selectedItem.cells("xm").innerText;
    var ksbm=selectedItem.cells("ysbm").ksbm;
    window.returnValue = new Array(ysbm,xm,ksbm);
            window.close();
    }
    }
    function btnCancel_onclick() {
    window.close();
    }
    function document_onkeydown() {
    if (selectedItem!=null){
    //alert(selectedItem.line);
    var line=parseInt(selectedItem.line);//从0计
    var upline=line-1;
    var downline=line+1;
    var lineNum=parseInt(document.all("lineNum").value)-1;//总行数减一
    if (line>0)
       upline=line-1
    else
       upline=line
    if (line<lineNum)
       downline=line+1;
    else
       downline=line

    if (event.keyCode==13){//回车返回值
        selectedItem.ondblclick();
        //alert("dd");
    }
    //alert(event.keyCode);
    if (event.keyCode==38){//向上方向箭
    selectItem(selectedItem,false);
    selectItem(document.all("row"+upline.toString()),true);

    }
    if (event.keyCode==40){//向下方向箭
    selectItem(selectedItem,false);
    selectItem(document.all("row"+downline.toString()),true);
    }
    }
    }
    function window_onload(){
    //alert(document.all("row0"))
    if (document.all("row0")=="[object]"){
       selectItem(document.all("row0"),true);
    }else{
    btnCancel.focus();
    }

    }
    //-->
    </SCRIPT><SCRIPT language="javascript" event="onclick" for="oTable">
    <!--
     document_onclick()
    //-->
    </SCRIPT><SCRIPT language="javascript" event="onkeydown" for="document">
    <!--
     document_onkeydown()
    //-->
    </SCRIPT>
    //=======代码  Default2.aspx.cs=======using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.Data.SqlClient;
    public partial class Default2 : System.Web.UI.Page
    {
        public int i=0;
        private int nCount=0;
        protected void Page_Load(object sender, EventArgs e)
        {
            SqlConnection conn = new SqlConnection("server=.;uid=sa;pwd=;database=northwind");
            SqlDataAdapter sda = new SqlDataAdapter("SELECT top 10 * FROM Orders ", conn);        DataSet ds = new DataSet();        sda.Fill(ds, "TB");
            nCount = ds.Tables["TB"].Rows.Count;
            this.GridView1.DataSource = ds.Tables["TB"];
            this.GridView1.DataBind();
            this.GridView1.Attributes.Add("name", "oTable");
        }
        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {        if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add("line", i.ToString());
                e.Row.Attributes.Add("id", string.Format("row{0}",i));
                e.Row.Attributes.Add("style", "CURSOR: hand");
                e.Row.Attributes.Add("bgColor", "#e8e9fc");
                e.Row.Attributes.Add("item", "1");
                e.Row.Attributes.Add("onmousemove", "document_onmouseover(this)");
                e.Row.Attributes.Add("onmouseout", "document_onmouseout(this)");
                e.Row.Attributes.Add("onclick", "document_onclick(this)");
                i++;
            }
        }
    }