HTML表格行上下移动,键盘上下键移动选择table表格行的js代码

//这是要操作的表格：

这是第一行

这是第二行

这是第三行

这是第四行

//这是操作表格的代码

var rowNo= -1;

var tableId = 'tb';

var inputId = 'show';

var selectedColor = "#FF0000"

function document.onkeydown()

{

//事件的标识代码

if (event.keyCode == 38)

{

for(var k=0;k

{

document.getElementById(tableId).rows(k).bgColor="#FFFFFF";

}

if(rowNo == 0)

{

rowNo++;

}

document.getElementById(tableId).rows(--rowNo%document.getElementById(tableId).rows.length).bgColor=selectedColor;

document.getElementById(inputId).value=document.getElementById(tableId).rows(rowNo%document.getElementById(tableId).rows.length).innerText;

}

//事件的标识代码

if (event.keyCode== 40)

{

for(var k=0;k

{

document.getElementById(tableId).rows(k).bgColor="#FFFFFF";

}

document.getElementById(tableId).rows(++rowNo%document.getElementById(tableId).rows.length).bgColor=selectedColor;

document.getElementById(inputId).value=document.getElementById(tableId).rows(rowNo%document.getElementById(tableId).rows.length).innerText;

}

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

HTML表格行上下移动,键盘上下键移动选择table表格行的js代码_javascript技巧相关推荐

html表格中加下拉,怎样在iview的Table表格中添加下拉菜单？
我怎么在table表格里面添加下拉菜单 render: (h, params) => { return h('div', [ h('Button', { props: { type: 'prim ...
【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑，点击单元格变成弹框修改数据
前言这是继我另一个帖子就是单元格点击变成输入框后添加的功能因为考虑到有些时候修改单元格的信息可能点击后要修改很多,那一个输入框不好用所以这时候就需要一个弹框可以把所有表单都显示出来修改所以这里 ...
bootstraptable 手册_bootstrap table表格使用方法详解
本文实例为大家分享了bootstrap table表格的使用方法,供大家参考,具体内容如下 1.进入页面,根据指定的URL加载数据(json格式) 2.加载成功,根据$table.bootstrapT ...
解决element-ui table 表格排列错位问题
有时候页面切换页签时会发生table表格排列错位, 是因为切换页签时table表格没有重新渲染导致解决办法:每次切换页签时重新渲染table表格即可解决 // 在table上添加key,每次切换页签 ...
React Table 表格组件使用教程排序、分页、搜索过滤筛选功能实战开发
React Table 表格组件使用教程 react-table 安装和使用 React Table 表格排序功能 React Table 表格搜索过滤筛选功能 React Table 表格分页功能 ...
顶级好用的 5 款 Vue table 表格组件测评与推荐
本文首发:<顶级好用的 5 款 Vue table 表格组件测评与推荐 - 卡拉云> Vue table 表格组件作为绝大多数项目需要内嵌的组件,可谓十分重要.表格看起来虽简单,实则坑很深 ...
lvgl怎样修改小控件table的行高
从某个我不清楚版本开始,lvgl的table控件无法修改行高. 翻阅lvgl官网可以看到,table行高无法直接修改,而是通过字体.padding等参数计算得到: 然后这时候,用代码lv_obj_se ...
jQuery 利用键盘上下键移动表格内容
在我们编辑表格内容时,经常需要将表格内容的位置进行移动,而利用键盘上下键进行移动是十分方便的. 效果如下: 基本原理是:先使用鼠标选中其中的一行,随后使用键盘上下键,通过获取不同的键值区分上移和下移的 ...
layui table 可编辑单元格 JS实现通过键盘上下左右键光标焦点移动到旁边的编辑行/列
layui table 可编辑单元格 JS实现通过键盘上下左右键光标焦点移动到旁边的编辑行/列类似效果上下左右键实现的代码 layui.config({base: '/static/layuia ...

HTML表格行上下移动,键盘上下键移动选择table表格行的js代码_javascript技巧

HTML表格行上下移动,键盘上下键移动选择table表格行的js代码_javascript技巧相关推荐

最新文章

热门文章