js 给表格添加上下左右事件

 1 /**操作键盘上下左右移动**/
 2 function bindArrowEvent(gridId, isSelected, skipCon) {
 3     if (isSelected == null || isSelected == "" || isSelected == undefined) {
 4         isSelected = false;
 5     }
 6     if (skipCon == null || skipCon == "" || skipCon == undefined) {
 7         skipCon = "";
 8     }
 9     $("#" + gridId + " input").on("keydown", function () {
10         var dataRowCount = $("#" + gridId + " tbody ").find("input").parents("tr").length;
11         if (dataRowCount < 1) {
12             return;
13         }
14         var numberInputs = $("#" + gridId).find("input:not(:disabled):not(:hidden)" + skipCon);
15         var cellCountInOneRow = numberInputs.length / dataRowCount;
16         var e = event || window.event || arguments.callee.caller.arguments[0];
17         var keyArray = [37, 38, 39, 40, 9, 13]; //   左/上/右/下/Tab/回车
18         if (keyArray.indexOf(e.keyCode) > -1) {
19             e.preventDefault();
20             var idx = numberInputs.index(this);
21             switch (e.keyCode) {
22                 // 左
23                 case 37:
24                     if (idx - 1 >= 0) {
25                         numberInputs[idx - 1].focus();
26                         if (isSelected) numberInputs[idx - 1].select();
27                     }
28                     break;
29                 // 上
30                 case 38:
31                     if (idx - cellCountInOneRow >= 0) {
32                         numberInputs[idx - cellCountInOneRow].focus();
33                         if (isSelected) numberInputs[idx - cellCountInOneRow].select();
34                     }
35                     break;
36                 // 右 和 Tab
37                 case 39:
38                 case 9:
39                     if (idx + 1 <= numberInputs.length - 1) {
40                         numberInputs[idx + 1].focus();
41                         if (isSelected) numberInputs[idx + 1].select();
42                     }
43                     break;
44                 // 下 和 回车
45                 case 40:
46                 case 13:
47                     if (idx + cellCountInOneRow <= numberInputs.length - 1) {
48                         numberInputs[idx + cellCountInOneRow].focus();
49                         if (isSelected) numberInputs[idx + cellCountInOneRow].select();
50                     }
51                     break;
52                 default:
53                     break;
54             }
55         }
56     }).on("keyup", function () { });
57 }

View Code

 1 /**
 2  * 给$对象做扩展,全局都可以使用
 3 * 绑定输入框获得焦点（键盘切换或鼠标移入均可）后的自动选中事件
 4 * 使用方式和操作对象一样,$.函数名
 5 */
 6 $.extend({
 7     //操作键盘上下左右移动
 8     bindArrowEvent: function (gridId) {
 9         $("#" + gridId + " tbody input").on("keydown", function () {
10             var allRowCount = $("#" + gridId + " tbody tr:visible").length;
11             var numberInputs = $("#" + gridId + ' tbody tr').find("input:not(:disabled):not(:hidden):not([readonly])");
12             var cellCountInOneRow = numberInputs.length / allRowCount;
13             var e = event || window.event || arguments.callee.caller.arguments[0];
14             var keyArray = [37, 38, 39, 40, 9, 13]; //   左/上/右/下/Tab/回车
15             if (keyArray.indexOf(e.keyCode) > -1) {
16                 e.preventDefault();
17                 var idx = numberInputs.index(this);
18                 switch (e.keyCode) {
19                     // 左
20                     case 37:
21                         if (idx - 1 >= 0) {
22                             numberInputs[idx - 1].focus();
23                             numberInputs[idx - 1].select();
24                         }
25                         break;
26                     // 上
27                     case 38:
28                         if (idx - cellCountInOneRow >= 0) {
29                             numberInputs[idx - cellCountInOneRow].focus();
30                             numberInputs[idx - cellCountInOneRow].select();
31                         }
32                         break;
33                     // 右 和 Tab
34                     case 39:
35                     case 9:
36                         if (idx + 1 <= numberInputs.length - 1) {
37                             numberInputs[idx + 1].focus();
38                             numberInputs[idx + 1].select();
39                         }
40                         break;
41                     // 下 和 回车
42                     case 40:
43                     case 13:
44                         if (idx + cellCountInOneRow <= numberInputs.length - 1) {
45                             numberInputs[idx + cellCountInOneRow].focus();
46                             numberInputs[idx + cellCountInOneRow].select();
47                         }
48                         break;
49                     default:
50                         break;
51                 }
52             }
53         }).on("keyup", function () { });
54     },
55     /**
56      * 绑定输入框获得焦点（键盘切换或鼠标移入均可）后的自动选中事件
57      * @@param gridId 不包含#前缀的Grid Id
58      */
59     bindMouseClickAutoFillContent: function (gridId) {
60         var numberInputs = $("#" + gridId).find("input:not(:disabled):not(:hidden):not([readonly]):not(:checkbox)");
61         numberInputs.on("focus", function (e) {
62             var start = $(this).attr("start");
63             var end = $(this).attr("end");
64             autoselect(this, start, end);
65         });
66     }
67 })

View Code

相关阅读:
去除inline-block出现间距的几种方法
 vscode插件和快捷键
 es6三个点运算符
 jq返回顶部
 jq版轮播图
 js动态操作DOM
js中的闭包
 es6之箭头函数
 in和hasOwnProperty的区别
 改变this指向的三种方法
原文地址：https://www.cnblogs.com/Early/p/15871818.html