实现表格使用上下左右键聚集代码,Css代码库,德仔网

代码语言

代码分类

【Css】实现表格使用上下左右键聚集

作者:依依 / 发布于2016/8/4/ 648

//调用：new tabTableInput("tblGrid","text");  
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) {  
            $(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_");  
  
                if (evt.which < 37 || evt.which > 40) {  
                    return;  
                }  
  
                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().select();  
            });  
        });  
  
        rowInputs.push({ "length": thisRowInputs.length, "rowindex": inputRowIndex, "data": rowArray });  
  
        inputRowIndex++;  
    });  
}

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

同语言下

可能有用的

依依贡献的其它代码(32)