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

 更新时间:2022年02月22日 10:10:10   作者:Cheang_Bokgaai  
这篇文章主要为大家详细介绍了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针对日期时间简单计算相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 基于Jquery代码实现支持PC端手机端幻灯片代码

    基于Jquery代码实现支持PC端手机端幻灯片代码

    支持PC端手机端幻灯片代码是一款支持移动触摸,支持鼠标拖拽切换,支持带进度条的自动播放模式,本文给大家分享一款基于jquery代码实现支持pc端手机端幻灯片代码,感兴趣的朋友一起学习吧
    2015-11-11
  • jQuery实现的登录浮动框效果代码

    jQuery实现的登录浮动框效果代码

    这篇文章主要介绍了jQuery实现的登录浮动框效果代码,点击登陆链接可弹出悬浮登录框,涉及jQuery中show与hide方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 详解jQuery的表单验证插件--Validation

    详解jQuery的表单验证插件--Validation

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。本文主要对表单验证插件-Validation进行案例分析,详细介绍,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • jQuery弹出下拉列表插件(实现kindeditor的@功能)

    jQuery弹出下拉列表插件(实现kindeditor的@功能)

    这篇文章主要介绍了jQuery弹出下拉列表插件(实现kindeditor的@功能)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • 快速实现jQuery多级菜单效果

    快速实现jQuery多级菜单效果

    这篇文章主要教大家如何快速实现jQuery多级菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • jQuery 特性操作详解及实例代码

    jQuery 特性操作详解及实例代码

    这篇文章主要介绍了jQuery 特性操作详解的相关资料,并附实例代码,需要的朋友可以参考下
    2016-09-09
  • jQuery zclip插件实现跨浏览器复制功能

    jQuery zclip插件实现跨浏览器复制功能

    这篇文章主要介绍了jQuery zclip插件实现跨浏览器复制功能的方法,以及在实现过程中遇到的问题,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • checkbox使用示例

    checkbox使用示例

    checkbox想必大家对这个控件并不陌生吧,毕竟在网页制作过程中经常会使用到,下面与大家分享个示例主要介绍checkbox的使用,感兴趣的朋友可以参考下
    2013-08-08

最新评论