最近需求:网页表格列表中需要通过键盘上下键切换来实现预览详细功能,不再仅仅是鼠标多次点击的效果。
具体实现参考如下:
其中,键盘码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是根据分页的当前页与每页显示条数计算得出。
(因为我这里的数据是整个窗口滚动加载的方式获得,所以切换没有实现开头与结尾的循环。)