$(document).on('keydown', '.layui-table-edit', function (e) { var td = $(this).parent('td'), tr = td.parent('tr'), trs = tr.parent().parent().find("tr"), tr_index = tr.index(), td_index = td.index(), td_last_index = tr.find('[data-edit="text"]:last').index(), td_first_index = tr.find('[data-edit="text"]:first').index(); switch (e.keyCode) { case 13: //enter case 39: //右 td.nextAll('[data-edit="text"]:first').click(); if (td_index == td_last_index) { tr.next().find('td').eq(td_first_index).click(); if (tr_index == trs.length - 1) { trs.eq(0).find('td').eq(td_first_index).click(); } } setTimeout(function () { $('.layui-table-edit').select() }, 0); break; case 37: //左 td.prevAll('[data-edit="text"]:first').click(); setTimeout(function () { $('.layui-table-edit').select() }, 0); break; case 38: //上 tr.prev().find('td').eq(td_index).click(); setTimeout(function () { $('.layui-table-edit').select() }, 0); break; case 40: //下 tr.next().find('td').eq(td_index).click(); setTimeout(function () { $('.layui-table-edit').select() }, 0); break;
时间: 2023-12-06 13:43:03 浏览: 31
这段代码是对于一个表格进行键盘事件的监听,主要是为了方便用户在表格中进行快速编辑和跳转。根据不同的按键,会执行不同的操作,比如回车键或右箭头键会跳转到下一个可编辑单元格,左箭头键会跳转到上一个可编辑单元格,上箭头键会跳转到上一行同一列的单元格,下箭头键会跳转到下一行同一列的单元格。同时,在跳转之后会自动选中当前单元格,以方便用户进行编辑操作。
相关问题
$(document).keydown(function(e){ var previous = 37, next = 39; switch (e.keyCode) { case previous: $('.sj-book').turn('previous'); break; case next: $('.sj-book').turn('next'); break; } });
这段代码是一个键盘按键事件的处理函数。当用户按下键盘的左箭头键(keyCode为37)或右箭头键(keyCode为39)时,会执行以下操作:
1. 定义变量 `previous` 为37,代表左箭头键的keyCode;定义变量 `next` 为39,代表右箭头键的keyCode。
2. 根据按下的键盘按键的keyCode进行判断:
- 如果按下的是左箭头键,通过 `$('.sj-book').turn('previous')` 实现翻到上一页的效果。
- 如果按下的是右箭头键,通过 `$('.sj-book').turn('next')` 实现翻到下一页的效果。
这段代码主要用于监听键盘按键事件,并根据按下的键盘按键执行相应的翻页操作。当用户按下左箭头键时,翻到上一页;当用户按下右箭头键时,翻到下一页。
vue的el-table设置@keydown.native 没有反应 怎么办
如果您在`el-table`组件上设置了`@keydown.native`,但是没有反应,可以尝试以下几个步骤:
1. 确保您的事件处理程序函数被正确绑定到了`@keydown.native`事件上,可以在事件处理程序函数中添加一个简单的`console.log()`语句,查看是否有输出。
2. 确保您的`el-table`组件处于聚焦状态,可以通过点击表格或使用`tab`键进行切换。
3. 如果您在`el-table`组件上使用了`v-if`条件渲染,那么您需要确保组件已经被渲染出来,才能正确地绑定`@keydown.native`事件。可以使用`this.$nextTick()`方法来确保组件已经渲染完成。
4. 如果您在使用`el-table`组件时,还使用了其他自定义组件或第三方组件,可能会导致事件冲突或覆盖。可以尝试将自定义组件或第三方组件移除,只保留`el-table`组件,看看是否可以正常触发`@keydown.native`事件。
希望以上几个步骤可以帮助您解决问题。