|
<html> |
|
<head> |
|
<title>键盘方向键控制表格</title> |
|
</head> |
|
<body onKeyDown="keyCheck();"> |
|
<table width="80" bgcolor="#FFFFFF" height="60" border="1" bordercolor="#FFFFFF" cellpadding="0" cellspacing="0"> |
|
<tr> |
|
<td id="td1" width="80">第一行</td> |
|
</tr> |
|
<tr> |
|
<td id="td2" width="80">第二行</td> |
|
</tr> |
|
<tr> |
|
<td id="td3" width="80">第三行</td> |
|
</tr> |
|
<tr> |
|
<td id="td4" width="80">第四行</td> |
|
</tr> |
|
<tr> |
|
<td id="td5" width="80">第五行</td> |
|
</tr> |
|
<tr> |
|
<td id="td6" width="80">第六行</td> |
|
</tr> |
|
</table> |
|
<script language="javascript"> |
|
var tdIndex = 1; //获取当前行的索引变量 |
|
document.all.td1.style.backgroundColor='#3366aa'; //设置列1的背景色 |
|
function keyCheck() { |
|
if (window.event.keyCode==38) { //向上键 |
|
for (var i=1;i<=6;i++) { |
|
eval("document.all.td"+i+".style.backgroundColor='#FFFFFF'");//更改所有的行背景色 |
|
} |
|
if (tdIndex<=1) { |
|
document.all.td1.style.backgroundColor='#3366aa'; //到顶端时,只第一行颜色改变 |
|
alert('已到顶端'); |
|
return false; |
|
} |
|
else { |
|
tdIndex -= 1; //行索引减小 |
|
eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");//改变行的背景色 |
|
} |
|
} |
|
if (window.event.keyCode==40) { //向下键 |
|
for (var i=1;i<=6;i++) { |
|
eval("document.all.td"+i+".style.backgroundColor='#FFFFFF'");//更改所有的行背景色 |
|
} |
|
if (tdIndex>=6) { |
|
document.all.td6.style.backgroundColor='#3366aa'; //到顶端时,只第一行颜色改变 |
|
alert('已到底端'); |
|
return false; |
|
} |
|
else { |
|
tdIndex += 1; //行索引增加 |
|
eval("document.all.td"+tdIndex+".style.backgroundColor='#3366aa'");//改变行的背景色 |
|
} |
|
} |
|
} |
|
</script> |
|
</body> |
|
</html> |