现在的位置: 首页 > 综合 > 正文

点键盘“上下”按钮时得到行的焦点，同时改变颜色背景色

2013年10月20日 ⁄ 综合 ⁄ 共 5264字 ⁄ 字号 小 中 大 ⁄ 评论关闭
  <!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN">  
  <html>  
  <head>  
  <title>   New   Document   </title>  
  <meta   name="Generator"   content="EditPlus">  
  <meta   name="Author"   content="Seagle.K">  
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">  
  <script   language="JavaScript">  
  function   setRow(otbl,   idx)  
  {  
  for   (var   i=0;   i<otbl.rows.length;   i++)  
  {  
  otbl.rows[i].className   =   "";  
  }  
   
  if   (typeof   idx   !=   'undefined')  
  {  
  otbl.rows[idx].className   =   "focus";  
  }  
  }  
   
  function   getRowIdx(otbl)  
  {  
  for   (var   i=0;   i<otbl.rows.length;   i++)  
  {  
  if   (otbl.rows[i].className=="focus")  
  {  
  return   i;  
  }  
  }  
   
  return   0;//否则返回首行;  
  }  
   
  function   moverow()  
  {  
  var   keycode   =   event.keyCode;  
  var   otbl   =   document.all("tablename");  
  var   rowsLen   =   otbl.rows.length;  
  var   currentRowIdx   =   getRowIdx(otbl);  
  switch   (keycode)  
  {  
  case   38://↑  
  if   (currentRowIdx   ==   0   ||   currentRowIdx   ==   1)  
  {//首行  
  setRow(otbl,   rowsLen-1);  
  }else  
  {  
  setRow(otbl,   currentRowIdx-1);  
  }  
  break;  
  case   40://↓  
  if   (currentRowIdx   ==   rowsLen-1)  
  {//首行  
  setRow(otbl,   1);  
  }else  
  {  
  setRow(otbl,   currentRowIdx+1);  
  }  
  break;  
  default:  
  }  
  }  
   
  function   focusrow()  
  {  
  var   oSrc   =   event.srcElement;  
  if   (oSrc.offsetParent   &&   oSrc.offsetParent.id   ==   "tablename")  
  {  
  var   otbl   =   oSrc.offsetParent;  
   
  var   rowIdx   =   (oSrc.parentElement.tagName=='TR')?oSrc.parentElement.rowIndex:oSrc.rowIndex;  
   
  if   (rowIdx   !=   0)  
  {  
  setRow(otbl,   rowIdx);  
  }  
  }  
  }  
  </script>  
  <style   type="text/css">  
  tr.focus{  
  background-color:#CCCCCF;  
  }  
  </style>  
  </head>  
  <body   onkeydown="moverow()"   onclick="focusrow()">  
  <TABLE   id="tablename"   name="tablename"   style="BORDER-COLLAPSE:   collapse"   borderColor=#000000    
  cellSpacing=0   cellPadding=0   width="100%"   border=1>  
      <Thead   bgColor=#ffffff>  
          <TD   vAlign=center   noWrap   align=middle   width="11%"   height=20><FONT    
              color=#ff0000>名称</FONT></TD>  
          <TD   vAlign=center   noWrap   align=middle   width="11%"   height=20><FONT    
              color=#ff0000>编码</FONT></TD>  
          <TD   vAlign=center   noWrap   align=middle   width="11%"   height=20><FONT    
              color=#ff0000>类别</FONT></TD>  
          <TD   vAlign=center   noWrap   align=middle   width="11%"   height=20><FONT    
              color=#ff0000>壮态</FONT></TD>  
          <TD   vAlign=center   noWrap   align=middle   width="11%"   height=20><FONT    
              color=#ff0000>建档日期</FONT></TD>  
          <TD   vAlign=center   noWrap   align=middle   width="11%"   height=20><FONT    
              color=#ff0000>建档人</FONT></TD>  
          <TD   vAlign=center   noWrap   align=middle   width="11%"   height=20><FONT    
              color=#ff0000>顺序号</FONT></TD>  
          <TD   vAlign=center   noWrap   align=middle   width="11%"   height=20><FONT    
              color=#ff0000>拼音码</FONT></TD></Thead>  
  <tbody>  
      <TR   id=1  
      onKeyDown="keykessup(this)"   bgColor=#ffffff>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>科室1</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>1001</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>1</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>1</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>05   20   2005    
  1</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>李伟</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>1</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>NUll</TD></TR>  
      <TR   id=2    
        bgColor=#ffffcc>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>科室10</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>1002</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>1</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>1</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>05   21   2005    
  1</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>李伟</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>2</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>NUll</TD></TR>  
      <TR   id=3   ondblclick=""    
      bgColor=#ffffff>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>万县</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>1008</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>1</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>1</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>05   20   2005    
  1</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>李伟</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>8</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>NUll</TD></TR>  
      <TR   id=4   ondblclick=""  
      bgColor=#ffffcc>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>长寿</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>1009</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>1</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>1</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>05   20   2005    
  1</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>李伟</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>9</TD>  
          <TD   vAlign=center   noWrap   align=middle   width="12%"   height=20>NUll</TD></TR>  
      </tbody></TABLE>  
  </body>  
  </html>   
   
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞