1. 程式人生 > >JS實現表格使用上下左右鍵聚集

JS實現表格使用上下左右鍵聚集

//呼叫: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++;
    });
}