使用jQuery在桌子上的Keydown

时间:2014-10-08 19:42:12

标签: jquery html-table

我有以下Javascript,如果我按下向下箭头,光标将下到下一行。我似乎无法实现这一点。有什么建议吗?

的jQuery

$('td').keypress(function(evt){
    if(evt.which == 40){
        event.preventDefault();
        var cellindex = $(this).index()
        var rowindex = $(this).parents('tr').index() + 1
        $(this).parents('table').find('tr:eq('+rowindex+') td:eq('+cellindex+')').focus()
    }
})

HTML

<table>
  <tr><td contenteditable>My_Name</td><td>Surname</td></tr>
  <tr><td contenteditable>My_Name2</td><td>Surname2</td></tr>
</table>

1 个答案:

答案 0 :(得分:0)

使用此:

jQuery(document).ready(function(){

    $('td').keydown(function(evt) {
        if(evt.keyCode == 40) {
            event.preventDefault();
            var cellindex = $(this).index()
            var rowindex = $(this).parents('tr').index() + 1
            $(this).parents('table').find('tr:eq('+rowindex+') td:eq('+cellindex+')').focus()
        }
    });
});

或可用于此代码中的向下和向上键事件

jQuery(document).ready(function(){
$('td').keydown(function(evt){
    if(evt.keyCode == 40){
        event.preventDefault();
        var cellindex = $(this).index()
        var rowindex = $(this).parents('tr').index() + 1
        $(this).parents('table').find('tr:eq('+rowindex+') td:eq('+cellindex+')').focus()
    }else if (evt.keyCode == 38){
            event.preventDefault();
        var cellindex = $(this).index()
        var rowindex = $(this).parents('tr').index() - 1
        $(this).parents('table').find('tr:eq('+rowindex+') td:eq('+cellindex+')').focus()
    }
})
});

jsfiddle