JS實現表格使用上下左右鍵聚集
阿新 • • 發佈:2019-01-28
//呼叫: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++; }); }