jQuery 利用键盘上下键移动表格内容

在我们编辑表格内容时，经常需要将表格内容的位置进行移动，而利用键盘上下键进行移动是十分方便的。

效果如下：

基本原理是：先使用鼠标选中其中的一行，随后使用键盘上下键，通过获取不同的键值区分上移和下移的操作，随后首先交换两行的编号，随后交换两行的内容，保证了两行内容移动而编号不改变。

下面是代码：

function clickA(obj){currentLine=$.trim($(obj).find("td:first-child").html());$('#table1 tr').each(function () { $(this).css("background-color", "white"); });//将所有行变为白色$('#line' + currentLine).each(function () { $(this).css("background-color", "red"); });//将当前行变为红色//获取当前行数
}

以上为鼠标的点击一行的操作，获取当前的行数，以及将当前行变为红色。

<tr id=\"line"+num+"\" onclick='clickA(this)'></tr>

这个表格每一行的点击事件绑定。

 $(document).keydown(function(event){  if(event.keyCode == 38){  //键盘上键up_exchange_line();}else if (event.keyCode == 40){   down_exchange_line();//键盘下键}});

这个是获取扑捉键盘上下键动作，进行不同的操作

function up_exchange_line(index) {if(currentLine != null && currentLine!= " "){nowrow = currentLine;//获取当前行}else if (index != null) {nowrow = $.trim($(index).parent().parent().find("td:first-child").html());}if (nowrow == 0) {alert('请点击一行');return false;//未点击，无当前行要求用户点击一行}if (nowrow <= 1) {alert('已到达顶端!');return false;//上移到顶端后提示}var up = nowrow - 1;//首先交换两行序号$('#line' + up + " td:first-child").html(nowrow);$('#line' + nowrow + " td:first-child").html(up);//变色$('#table1 tr').each(function () { $(this).css("background-color", "white"); });$('#line' + up).css("background-color", "red"); ;//获取两行的内容var upContent = $('#line' + up).html();var currentContent = $('#line' + nowrow).html();//交换内容$('#line' + up).html(currentContent);$('#line' + nowrow).html(upContent);currentLine = up;//改变当前行，为继续上移做准备}

这个上移的方法，首先获取当前行数，随后获取上一行的行数，首先进行序号的交换，随后将当前行的红色变至上一行，随后交换所有的内容，最后更新当前行。这样保证了，内容和当前所在行会跟这个键盘上键而移动而序号可以保持不变。

function down_exchange_line(index) {if(currentLine != null && currentLine != " "){nowrow = currentLine;}else if (index != null) {nowrow = $.trim($(index).parent().parent().find("td:first-child").html());}if (nowrow == 0) {alert('请选择一项!');return false;}maximum=$("#table1").find("tr").length ;if (nowrow >= maximum-1) {alert('已经是最后一项了!');return false;}var dS = parseInt(nowrow) + 1;$('#line' + dS + " td:first-child").html(nowrow);$('#line' + nowrow + " td:first-child").html(dS);//变色$('#table1 tr').each(function () { $(this).css("background-color", "white"); });$('#line' + dS).css("background-color", "red"); //获取两行的内容var nextContent = $('#line' + dS).html();var currentContent = $('#line' + nowrow).html();//交换内容$('#line' + dS).html(currentContent);$('#line' + nowrow).html(nextContent);if(dS>maximum-1){currentLine=dS-1;}else{currentLine = dS;}}

同理，下降也是使用相同的方法，只不过是向下交换数据。

这样基于jQuery使用键盘上下键交换表格内容的操作就完成了

如果各位有什么疑问，意见，不同的想法欢迎留言，欢迎交流。

本人本科软件工程学生党一枚，如有错误欢迎指正，欢迎交流。

jQuery 利用键盘上下键移动表格内容相关推荐

全局搜索利用键盘上下键切换选中内容
最近开发一个桌面端的全局搜索,利用键盘上下键切换选中内容,类似于钉钉一样的效果,如图: html: <div class="rong-search-main">< ...
jquery 序列化表格内容为字符串（serialize）
ajax - serialize() 方法-遍历form进行AJAX提交,序列表表格内容为字符串. html: <form><select name="single&quo ...
excel打印预览在哪里_别再浪费A4纸了，Excel按下这个键，一张纸可以打印全部表格内容...
我们在工作和生活中,经常需要打印Excel表格,可是有时表格太宽了,无法打印在一张A4纸上,今天就来教大家几种方法,只需按下一个键,就可以打印全部表格内容. 一.表格打印一页 1.设置分页首先点击[ ...
利用Karabiner和键盘修饰键修改MAC键盘，实现打字时双手不离开字母和数字区
文章目录第一步第二步第三步其他第一步下载Karabiner软件并安装,在Simple modifications标签页中设置如下,且Mac系统设置中键盘修饰键设置如下. 第二步代码转自h ...
jQuery获取表格内容
一个表格往往是从后台获取数据,因此表格的内容往往只有孤立的tr.td标签,而不包含id.class.name这些可以直接被选择器识别的标签:而且从后台获取的数据往往是不断发生变化的,给表格加上id等标 ...
vue+elementui系统利用Export2Excel.js将表格内容导出到excel，并设置表头文字水平垂直居中
写在前面:这是纯前端导出,导出的表格是二级表头,内容是四级单元格(单元格内有四小格),这几个点学会之后应该能适应大部分导出excel的需求了.本次功能记录真实有效.对于之前没接触过导出excel需求的 ...
JQuery实例：可以编辑的表格
HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...
html 按下和松开事件,JQuery通过键盘控制键盘按下与松开触发事件
JQuery通过键盘控制键盘按下与松开触发事件效果图: HTML部分: 首先设置几个盒子,用来构建这个页面的大致框架. 给盒子相应的类名以及id,方便css的布局以及JQuery的获取. 在盒子内放 ...
利用dos管道命令获取屏幕内容_汇编语言--常用DOS功能
常用的DOS功能调用 1．键盘输入并显示(1号功能调用) 格式: MOV AH, 01HINT 21H 功能:按下任何键,将其对应字符的ASCII码送入AL中,并在屏幕上显示该字符.如果按下的是Ctr ...

jQuery 利用键盘上下键移动表格内容

jQuery 利用键盘上下键移动表格内容相关推荐

最新文章

热门文章