这篇文章主要为大家详细介绍了jQuery利用键盘上下键移动表格内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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"); }); //将当前行变为红色 //获取当前行数 }以上为鼠标的点击一行的操作，获取当前的行数，以及将当前行变为红色。
这个表格每一行的点击事件绑定。
$(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使用键盘上下键交换表格内容的操作就完成了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
以上就是jQuery利用键盘上下键移动表格内容的详细内容，更多请关注0133技术站其它相关文章！
