键盘上下键切换实现预览功能

最近需求：网页表格列表中需要通过键盘上下键切换来实现预览详细功能，不再仅仅是鼠标多次点击的效果。

具体实现参考如下：

其中，键盘码38代表向上键，40代表向下键。

document.onkeydown 触发键盘按下的事件。

 

var keyboardUpDown = function(rowNum){
		var rowNum = parseInt(rowNum);
//		var totalRow = parseInt($("#PageCount").text());
		$(".doclist tr").removeClass("isSelect");
		document.onkeydown = function(evt){
			var totalRow = parseInt($("#CurrentPage").text())*30;
			var evt = evt || window.event; 
			evt.preventDefault();
			var a = evt.target||evt.srcElement;
			if(evt.keyCode==38){
				if(rowNum==1)
					rowNum = 2;//totalRow+1;
				var lastRow = rowNum-1;
				if($(".doclist tr:eq("+rowNum+")").hasClass("isSelect")){
					$(".doclist tr:eq("+rowNum+")").removeClass("isSelect");
				}
				$(".doclist tr:eq("+lastRow+")").addClass("isSelect");
				var select = ".doclist tr:eq("+lastRow+")";
				var id = $(select).attr("id");
				var libid = $(select).attr("libid");
				loadData(libid, id);
				rowNum = lastRow;
			}else if(evt.keyCode==40){
				if(rowNum==totalRow)
					rowNum = totalRow-1;//0;
				var nextRow = rowNum+1;
				if($(".doclist tr:eq("+rowNum+")").hasClass("isSelect")){
					$(".doclist tr:eq("+rowNum+")").removeClass("isSelect");
				}
				$(".doclist tr:eq("+nextRow+")").addClass("isSelect");
				var select = ".doclist tr:eq("+nextRow+")";
				var id = $(select).attr("id");
				var libid = $(select).attr("libid");
				loadData(libid, id);
				rowNum = nextRow;
			}
		}
	}

注： loadData的功能是向后台获取数据，放入固定的div中进行预览展示功能。

        totalRow是根据分页的当前页与每页显示条数计算得出。

（因为我这里的数据是整个窗口滚动加载的方式获得，所以切换没有实现开头与结尾的循环。）