对table中的td添加上下左右键盘控制，控制光标选中

最新推荐文章于 2022-06-01 15:57:13 发布

weixin_44409702

最新推荐文章于 2022-06-01 15:57:13 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 html web前端混合开发文章标签： jq table 给tr td添加键盘上下左右控制表格添加键盘事件键盘事件 js添加上下左右

本文链接：https://blog.youkuaiyun.com/weixin_44409702/article/details/95482661

前端同时被 3 个专栏收录

7 篇文章

订阅专栏

html

7 篇文章

订阅专栏

web前端

7 篇文章

订阅专栏

博客主要围绕HTML代码展开，重点是为表格添加键盘事件，实现给tr td添加上下左右的键盘控制功能，属于前端开发中对表格交互性的技术实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码




		1 2		dsfdf

封装的jq代码 /** * 方向键移动 */ $('#id').keyup(function (e) { var $input, idx = $(e.target).parent().index() switch (e.keyCode) { case 37: $input = $(e.target).parent().prev().children() $input.length > 0 && $input.focus() break; case 39: $input = $(e.target).parent().next().children() $input.length > 0 && $input.focus() break; case 38: $input = $($(e.target).parents('tr').prev().children()[idx]).children() $input.length > 0 && $input.focus() break; case 40: $input = $($(e.target).parents('tr').next().children()[idx]).children() $input.length > 0 && $input.focus() break; } }) 记录一下