Jquery通过方向键(左上右下) 来控制表格内输入框的自由移动

主体方法函数：

var inputs = $("#@(Perfix)tbData tbody").find("input[type='text']");//获取表格内所有的输入框元素

//方向键上下左右移动方法事件 add by xsun 2016-07-01
    function keyDown(event) {
        //debugger;
        var focus = document.activeElement;//获取当前焦点的元素
        if (!document.getElementById("@(Perfix)tbData").contains(focus)) return;//如果获取到的元素不包含在id='@(Perfix)tbData'表格内则直接返回
        var event = window.event || event;
        var key = event.keyCode;
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i] === focus) break;//通过以上获得的当前焦点来获取表格输入框的位置
        }
        switch (key) {
            case 37://左
                if (i > 0) {
                    inputs[i - 1].focus();//1:表示按方向键左时向左移动一个位置
                    inputs[i - 1].click();
                }
                break;
            case 38://上

                if (i - 3 >= 0) {
                    inputs[i - 3].focus();//3:表示你一行中有几个输入框，按向上键时定位到当前焦点的上一行的同一位置
                    inputs[i - 3].click();
                }
                break;
            case 39://右
                if (i < inputs.length - 1) {
                    inputs[i + 1].focus();//1:表示按方向键右时向右移动一个位置
                    inputs[i + 1].click();
                }
                break;
            case 40://下
                if (i + 3 < inputs.length) {
                    inputs[i + 3].focus();
                    inputs[i + 3].click();
                }
                break;
        }
    }

主体表格样式及调用方法：

<table id="@(Perfix)tbData" class="table table-striped table-bordered table-hover" οnkeydοwn="keyDown(event);" cellspacing="0"></table>

整体结构如下图：