这两天正在做一个通过Javascript实现用键盘的方向键来控制表格的行选中功能，己写了个小脚本，放到这里方便以后使用。
这个脚本一共两个文件，首先是JS文件（tablecontrol.js）：
1. var currentLine=-1, offsetTr = 0;
2. var $ =function(id){ return document.getElementById(id);}
3. function keyDownEvent(e){
4. var e = window.event||e;
5. if(e.keyCode==38){
6. offsetTr = 0;
7. currentLine--;
8. changeItem();
9. }else if(e.keyCode==40){
10. offsetTr = 150;
11. currentLine++;
12. changeItem();
13. }else if(e.keyCode==13&¤tLine>-1){
14. addUser();
15. }
16. return false;
17. }
18. function changeItem(){
19. if(!$('buddyListTable')) return false;
20. var it = $('buddyListTable');
21. if(document.all){
22. it = $('buddyListTable').children[0];
23. }
24. changeBackground();
25. if(currentLine<0) currentLine = it.rows.length-1;
26. if(currentLine >= it.rows.length) currentLine = 0;
27. it.rows[currentLine].className ="buddyListHighLight";
28. if($('allBuddy')){
29. $('allBuddy').scrollTop =it.rows[currentLine].offsetTop-offsetTr;
30. }
31. }
32. function changeBackground(){
33. var it = $('buddyListTable');
34. if(document.all){
35. it = $('buddyListTable').children[0];
36. }
37. for(var i=0; i<it.rows.length; i++){
38. if(i%2==0){
39. it.rows[i].className = "buddyListOdd";
40. }else{
41. it.rows[i].className = "buddyListEven";
42. }
43. }
44. }
45. function addUser(){
46. var it = $('buddyListTable');
47. if(document.all){
48. it = $('buddyListTable').children[0];
49. }
50. var trBody = it.rows[currentLine].innerHTML;
51. $('result').innerHTML = $('result').innerHTML+trBody;
52. }
下面是HTML文件：
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <htmlxmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
5. <script language="javascript"src="tablecontrol.js"></script>
6. <style type="text/css">
7. .buddyListOdd{
8. background-color:#f0f0f0;
9. }
10. .buddyListEven{
11. background-color:#ffffff;
12. }
13. .buddyListHighLight{
14. background-color:#DCE2E8;
15. }
16. </style>
17. </head>
18. <body>
19. <div style="width: 312px; height: 180px;overflow-y: scroll; overflow-x: hidden;color:#747678"id="allBuddy">
20. <table cellspacing="0"cellpadding="0" border="0" width="100%"id="buddyListTable"><tbody>
21. <tr class="buddyListOdd">
22. <td width="26px"><inputtype="checkbox"></td>
23. <td align="left"valign="middle">AAAAAA</td>
24. <td align="left">+861311111111</td>
25. </tr>
26. <tr class="buddyListEven">
27. <td width="26px"><inputtype="checkbox"></td>
28. <td align="left" valign="middle">BBBBBB</td>
29. <td align="left">+861322222222</td>
30. </tr>
31. <tr class="buddyListOdd">
32. <td width="26px"><inputtype="checkbox"></td>
33. <td align="left"valign="middle">CCCCCC</td>
34. <td align="left">+861333333333</td>
35. </tr>
36. <tr class="buddyListEven">
37. <td width="26px"><inputtype="checkbox"></td>
38. <td align="left"valign="middle">DDDDDD</td>
39. <td align="left">+861344444444</td>
40. </tr>
41. <tr class="buddyListOdd">
42. <td width="26px"><inputtype="checkbox"></td>
43. <td align="left"valign="middle">EEEEEE</td>
44. <td align="left">+861355555555</td>
45. </tr>
46. <tr class="buddyListEven">
47. <td width="26px"><inputtype="checkbox"></td>
48. <td align="left"valign="middle">FFFFFF</td>
49. <td align="left">+861366666666</td>
50. </tr>
51. <tr class="buddyListOdd">
52. <td width="26px"><inputtype="checkbox"></td>
53. <td align="left"valign="middle">GGGGGG</td>
54. <td align="left">+861366666666</td>
55. </tr>
56. <tr class="buddyListEven">
57. <td width="26px"><inputtype="checkbox"></td>
58. <td align="left"valign="middle">HHHHHH</td>
59. <td align="left">+861377777777</td>
60. </tr>
61. <tr class="buddyListOdd">
62. <td width="26px"><inputtype="checkbox"></td>
63. <td align="left"valign="middle">IIIIII</td>
64. <td align="left">+861388888888</td>
65. </tr>
66. <tr class="buddyListEven">
67. <td width="26px"><inputtype="checkbox"></td>
68. <td align="left"valign="middle">GGGGGG</td>
69. <td align="left">+861300000000</td>
70. </tr>
71. <tr class="buddyListOdd">
72. <td width="26px"><inputtype="checkbox"></td>
73. <td align="left"valign="middle">KKKKKK</td>
74. <td align="left">+861321111111</td>
75. </tr>
76. <tr class="buddyListEven">
77. <td width="26px"><inputtype="checkbox"></td>
78. <td align="left"valign="middle">LLLLLL</td>
79. <td align="left">+861322222222</td>
80. </tr>
81. <tr class="buddyListOdd">
82. <td width="26px"><inputtype="checkbox"></td>
83. <td align="left"valign="middle">MMMMMM</td>
84. <tdalign="left">+8613233333333</td>
85. </tr>
86. <tr class="buddyListEven">
87. <td width="26px"><inputtype="checkbox"></td>
88. <td align="left"valign="middle">NNNNNN</td>
89. <td align="left">+861311111111</td>
90. </tr>
91. </tbody>
92. </table>
93. </div>
94. <div>
95. 首先把鼠标焦点放入下面的输入框，然后按键盘的上下键，可以看到表格中的行被高亮选中<br />
96. <input type="text" onkeyup="returnkeyDownEvent(event);"/><br />
97. 按回车后，相对应的表格项会出现在下面，当然这只是一个简单的Demo，复杂的操作开发者可以自己添加<br />
98. <table id="result"></table>
99. </div>
100. </body>
101. </html>
大家有什么不明白的可以在下面提问：）
联系客服
