`
huibin
  • 浏览: 740342 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

table支持键盘上下键

    博客分类：
  • JS
JavaScriptXHTMLCSSHTML 
阅读更多

<!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>  
<title>   New   Document   </title>
<style type="text/css">
   body{margin:0px;padding:0px;}
</style>
</head>  
   
<body>  
<table   bgcolor="#ffffff"   width="100%" height=100% id="testtable"   border=1>  
    <tr>  
        <td   height="20" >第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>  
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
     <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>  
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>  
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
     <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>  
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
   <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>  
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
   <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>  
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
   <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>  
    <tr>  
        <td   height="20">第1行</td>  
    </tr>  
    <tr>  
        <td   height="20">第2行</td>  
    </tr>
</table>
<script   language="JavaScript">  
<!--  
var isIE = (document.all) ? true : false;
function addEventHandler(oTarget, sEventType, fnHandler) {
   if (oTarget.addEventListener) {
    oTarget.addEventListener(sEventType, fnHandler, false);
   } else if (oTarget.attachEvent) {
    oTarget.attachEvent("on" + sEventType, fnHandler);
   } else {
    oTarget["on" + sEventType] = fnHandler;
   }
};
function removeEventHandler(oTarget, sEventType, fnHandler) {
     if (oTarget.removeEventListener) {
         oTarget.removeEventListener(sEventType, fnHandler, false);
     } else if (oTarget.detachEvent) {
         oTarget.detachEvent("on" + sEventType, fnHandler);
     } else {
         oTarget["on" + sEventType] = null;
     }
};

var tableObj=document.getElementById("testtable");  
var trObj=null;
var selectedRow=1;
function setSelectedRowBg(row,color){row.style.backgroundColor=color;}
addEventHandler(window,"load",function(){setSelectedRowBg(tableObj.rows[selectedRow],"#FFCC66");})
addEventHandler(document,"keydown",objKeydown)
addEventHandler(document,isIE?"mousewheel":"DOMMouseScroll",objWheel)
function objKeydown(e){
      var e=e||window.event;
      switch (e.keyCode) {
     case 38 ://上
      setSelectedRowBg(tableObj.rows[selectedRow],"white")
      selectedRow=selectedRow>0?selectedRow-1:0;
      setSelectedRowBg(tableObj.rows[selectedRow],"#FFCC66");
      fixScroll(tableObj.rows[selectedRow],"t")
      break;
     case 40 ://下
      var rowl=tableObj.rows.length-1;
      setSelectedRowBg(tableObj.rows[selectedRow],"white")
      selectedRow=selectedRow<rowl?selectedRow+1:rowl;
      setSelectedRowBg(tableObj.rows[selectedRow],"#FFCC66");
      fixScroll(tableObj.rows[selectedRow],"b")
      break;
     default :
      return;
    }
    if(isIE){e.returnValue = false;}else{e.preventDefault();}
}
function objWheel(e){
   var e=e||window.event;
   var detail=(e.detail||e.wheelDelta / (-40))/3;
   if(detail<0){
    setSelectedRowBg(tableObj.rows[selectedRow],"white")
    selectedRow=selectedRow>0?selectedRow-1:0;
    setSelectedRowBg(tableObj.rows[selectedRow],"#FFCC66");
    fixScroll(tableObj.rows[selectedRow],"t")
   }else{
    var rowl=tableObj.rows.length-1;
    setSelectedRowBg(tableObj.rows[selectedRow],"white")
    selectedRow=selectedRow<rowl?selectedRow+1:rowl;
    setSelectedRowBg(tableObj.rows[selectedRow],"#FFCC66");
    fixScroll(tableObj.rows[selectedRow],"b")
   }
   if(isIE){e.returnValue = false;}else{e.preventDefault();}
}
function fixScroll(obj,type){
   switch(type){
    case "t":
     var trh=obj.offsetHeight;
     var sch=document.documentElement.scrollTop;
     var offset=sch-getPosition(obj)[1]
     if(offset>0)document.documentElement.scrollTop=sch-trh;
     break;
    case "b":
     var trh=obj.offsetHeight;
     var dv=document.documentElement.clientHeight;
     var offset=getPosition(obj)[1]-dv+trh
     document.documentElement.scrollTop=offset>0?offset:0;
     break;
    default:
     return;
     break;
   }
}
function getPosition(element){
   var t=l=0;
   do {
       t += element.offsetTop || 0;
       l += element.offsetLeft || 0;
       element = element.offsetParent;
     } while (element);
     return [l, t];
}
</script>  
</body>  
</html>   

分享到：
| 转：Oracle存储过程的开发的介绍
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics