鍵盤上下鍵切換實現預覽功能

最近需求：網頁表格列表中需要通過鍵盤上下鍵切換來實現預覽詳細功能，不再僅僅是鼠標多次點擊的效果。

具體實現參考如下：

其中，鍵盤碼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是根據分頁的當前頁與每頁顯示條數計算得出。

（因爲我這裏的數據是整個窗口滾動加載的方式獲得，所以切換沒有實現開頭與結尾的循環。）