正文
JavaScript利用键盘方向键（上下键）控制表格行选中
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.buddyListOdd{
background-color:#f0f0f0;
}
.buddyListEven{
background-color:#ffffff;
}
.buddyListHighLight{
background-color:#DCE2E8;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
var currentLine=-1, offsetTr = 0;
var $=function(id){
return document.getElementById(id);
}
function keyDownEvent(e){
var e = window.event||e;
if(e.keyCode==38){
offsetTr = 0;
currentLine--;
changeItem();
}else if(e.keyCode==40){
offsetTr = 150;
currentLine++;
changeItem();
}else if(e.keyCode==13&¤tLine>-1){
addUser();
}
return false;
}
function changeItem(){
if(!$('buddyListTable')) return false;
var it = $('buddyListTable');
if(document.all){
it = $('buddyListTable').children[0];
}
changeBackground();
if(currentLine<0) currentLine = it.rows.length-1;
if(currentLine >= it.rows.length) currentLine = 0;
it.rows[currentLine].className = "buddyListHighLight";
if($('allBuddy')){
$('allBuddy').scrollTop = it.rows[currentLine].offsetTop-offsetTr;
}
}
function changeBackground(){
var it = $('buddyListTable');
if(document.all){
it = $('buddyListTable').children[0];
}
for(var i=0; i<it.rows.length; i++){
if(i%2==0){
it.rows[i].className = "buddyListOdd";
}else{
it.rows[i].className = "buddyListEven";
}
}
}
function addUser(){
var it = $('buddyListTable');
if(document.all){
it = $('buddyListTable').children[0];
}
var trBody = it.rows[currentLine].innerHTML;
$('result').innerHTML = $('result').innerHTML+trBody;
}
</SCRIPT>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="100%" id="buddyListTable"><tbody>
<tr class="buddyListOdd" onkeyup="return keyDownEvent(event);">
<td width="26px"><input type="checkbox"></td>
<td align="left" valign="middle">AAAAAA</td>
<td align="left">+861311111111</td>
</tr>
<tr class="buddyListEven">
<td width="26px"><input type="checkbox"></td>
<td align="left" valign="middle">BBBBBB</td>
<td align="left">+861322222222</td>
</tr>
<tr class="buddyListOdd">
<td width="26px"><input type="checkbox"></td>
<td align="left" valign="middle">CCCCCC</td>
<td align="left">+861333333333</td>
</tr>
<tr class="buddyListEven">
<td width="26px"><input type="checkbox"></td>
<td align="left" valign="middle">DDDDDD</td>
<td align="left">+861333333333</td>
</tr>
<tr class="buddyListEven">
<td width="26px"><input type="checkbox"></td>
<td align="left" valign="middle">DDDDDD</td>
<td align="left">+861344444444</td>
</tr>
<tr class="buddyListOdd">
<td width="26px"><input type="checkbox"></td>
<td align="left" valign="middle">EEEEEE</td>
<td align="left">+861355555555</td>
</tr>
<tr class="buddyListEven">
<td width="26px"><input type="checkbox"></td>
<td align="left" valign="middle">FFFFFF</td>
<td align="left">+861366666666</td>
</tr>
<tr class="buddyListOdd">
<td width="26px"><input type="checkbox"></td>
<td align="left" valign="middle">GGGGGG</td>
<td align="left">+861366666666</td>
</tr>
<tr class="buddyListEven">
<td width="26px"><input type="checkbox"></td>
<td align="left" valign="middle">HHHHHH</td>
<td align="left">+861377777777</td>
</tr>
<tr class="buddyListOdd">
<td width="26px"><input type="checkbox"></td>
<td align="left" valign="middle">IIIIII</td>
<td align="left">+861388888888</td>
</tr>
<tr class="buddyListEven">
<td width="26px"><input type="checkbox"></td>
<td align="left" valign="middle">JJJJJJ</td>
<td align="left">+861399999999</td>
</tr>
<tr class="buddyListOdd">
<td width="26px"><input type="checkbox"></td>
<td align="left" valign="middle">KKKKKK</td>
<td align="left">+861321111111</td>
</tr>
<tr class="buddyListEven">
<td width="26px"><input type="checkbox"></td>
<td align="left" valign="middle">LLLLLL</td>
<td align="left">+861322222222</td>
</tr>
<tr class="buddyListOdd">
<td width="26px"><input type="checkbox"></td>
<td align="left" valign="middle">MMMMMM</td>
<td align="left">+861323333333</td>
</tr>
<tr class="buddyListEven">
<td width="26px"><input type="checkbox"></td>
<td align="left" valign="middle">NNNNNN</td>
<td align="left">+861324444444</td>
</tr>
</tbody>
</table>
<div>
首先把鼠标焦点放入下面的输入框，然后按键盘的上下键，可以看到表格中的行被高亮选中<br />
<input type="text" onkeyup="return keyDownEvent(event);"/><br />
按回车后，相对应的表格项会出现在下面，当然这只是一个简单的Demo，复杂的操作开发者可以自己添加<br />
<table id="result"></table>
</div>
</body>
</html>
