[ad#content]这两天正在做一个通过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&&currentLine>-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.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www./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"><input type="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"><input type="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"><input type="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"><input type="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"><input type="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"><input type="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"><input type="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"><input type="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"><input type="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"><input type="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"><input type="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"><input type="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"><input type="checkbox"></td>
  83. <td align="left" valign="middle">MMMMMM</td>
  84. <td align="left">+8613233333333</td>
  85. </tr>
  86. <tr class="buddyListEven">
  87. <td width="26px"><input type="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="return keyDownEvent(event);"/><br />
  97. 按回车后，相对应的表格项会出现在下面，当然这只是一个简单的Demo，复杂的操作开发者可以自己添加<br />
  98. <table id="result"></table>
  99. </div>
  100. </body>
  101. </html>