jQuery利用键盘上下键移动表格内容
时间：2023-03-18 10:23:19|栏目：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"); });
//将当前行变为红色
//获取当前行数
}
以上为鼠标的点击一行的操作，获取当前的行数，以及将当前行变为红色。
<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实现五星好评
栏 目：jquery
下一篇：jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
本文标题：jQuery利用键盘上下键移动表格内容
本文地址：http://www.codeinn.net/misctech/227666.html
