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

时间:2022-05-23 Cheang_Bokgaai 人气:0

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

效果如下：

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

下面是代码：

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使用键盘上下键交换表格内容的操作就完成了。

加载全部内容