<table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>编号</td>
    <td>名称</td>
    <td>城市</td>
  </tr>
  <tr>
    <td>100</td>
    <td>jack</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>101</td>
    <td>jim</td>
    <td>武汉</td>
  </tr>
  <tr>
    <td>102</td>
    <td>scl</td>
    <td>北京</td>
  </tr>
</table>如何用键盘上面的上下箭头(如:up,down)来在上面的三行表格上移动,同时把编号赋值给另外一个文本框
这个用JQuery或者js怎么写?

解决方案 »

  1.   

    文本框我没写出代码
     <input type="text" id="txtUserID"  style=" width:0px; height:0px;"  value="7" />
    给这个赋值
      

  2.   

    如果表格获取到焦点或鼠标事件,则调用函数判断判断输入的每一个键的健值,如果是UP或Down,你就知道怎么做了
    注意不同浏览器 JS 效果会不一样
      

  3.   

    写了个简单的原理示意,根据需要你再完善下,代码如下,也可以用http://jsfiddle.net/XdH8y/直接看效果。
    首先鼠标点到表格上,然后按上下键。
    <input type="text" id="txtUserID" value="7" />
    <table width="400" border="0" cellspacing="0" cellpadding="0" id="table">
      <tr>
      <td>编号</td>
      <td>名称</td>
      <td>城市</td>
      </tr>
      <tr tabIndex="0">
      <td>100</td>
      <td>jack</td>
      <td>上海</td>
      </tr>
      <tr tabIndex="0">
      <td>101</td>
      <td>jim</td>
      <td>武汉</td>
      </tr>
      <tr tabIndex="0">
      <td>102</td>
      <td>scl</td>
      <td>北京</td>
      </tr>
    </table>
    var table = document.getElementById('table');
    var tb = document.getElementById('txtUserID');
    var index = 1;
    table.onkeyup = function(e){
        if(e.keyCode == 38)up();
        if(e.keyCode == 40)down();
    }
       
        function up(){
        index --;
    update();
        }
        
        function down(){
            index++;
            update();
        }
            
            function update(){
                table.rows[index].focus();
    tb.value = table.rows[index].cells[0].innerHTML;
            }
      

  4.   

    貌似csdn的js的格式化的有点问题,不影响使用。