Jquery 表格光标上下左右移动 键盘操作

<script type="text/javascript">
        var tabTableInput = function (tableId, inputType) {
            var rowInputs = [];
            var trs = $("#" + tableId).find("tr");
            var inputRowIndex = 0;
            $.each(trs, function (i, obj) {
                if ($(obj).find("th").length > 0) { //跳过表头
                    return true;
                }
                var rowArray = [];
                var thisRowInputs;
                if (!inputType) { //所有的input
                    thisRowInputs = $(obj).find("input:not(:disabled):not(:hidden):not([readonly])");
                } else {
                    thisRowInputs = $(obj).find("input:not(:disabled):not(:hidden):not([readonly])[type=" + inputType + "]");
                }
                if (thisRowInputs.length == 0)
                    return true;
 
                thisRowInputs.each(function (j) {
                //alert("xx");
                    $(this).attr("_r_", inputRowIndex).attr("_c_", j);
                    rowArray.push({ "c": j, "input": this });
 
                    $(this).keydown(function (evt) {
                        var r = $(this).attr("_r_");
                        var c = $(this).attr("_c_");
 
                        var tRow
                        if (evt.which == 38) { //上
                            if (r == 0)
                                return;
 
                            r--; //向上一行
 
                            tRow = rowInputs[r];
                            if (c > tRow.length - 1) {
                                c = tRow.length - 1;
                            }
                        } else if (evt.which == 40) { //下
                            if (r == rowInputs.length - 1) { //已经是最后一行
                                return;
                            }
 
                            r++;
                            tRow = rowInputs[r];
                            if (c > tRow.length - 1) {
                                c = tRow.length - 1;
                            }
                        } else if (evt.which == 37) { //左
                            if (r == 0 && c == 0) {  //第一行第一个,则不执行操作
                                return;
                            }
                            if (c == 0) { //某行的第一个,则要跳到上一行的最后一个,此处保证了r大于0
                                r--;
                                tRow = rowInputs[r];
                                c = tRow.length - 1;
                            } else { //否则只需向左走一个
                                c--;
                            }
                        } else if (evt.which == 39) { //右
                            tRow = rowInputs[r];
                            if (r == rowInputs.length - 1 && c == tRow.length - 1) { //最后一个不执行操作
                                return;
                            }
 
                            if (c == tRow.length - 1) { //当前行的最后一个,跳入下一行的第一个
                                r++;
                                c = 0;
                            } else {
                                c++;
                            }
                        }
                        $(rowInputs[r].data[c].input).focus();
                    });
                });
 
                rowInputs.push({ "length": thisRowInputs.length, "rowindex": inputRowIndex, "data": rowArray });
                inputRowIndex++;
 
            });
        }
 
   new tabTableInput("rbtb","text");// rbtb:表格id;; text:表單元素類型
</script>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值