table支持键盘上下键
<!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>???
