zoukankan      html  css  js  c++  java
  • 动态的录入信息

      今天做了一个任务,让我实现动态在表格中的input框中动态的录入数据,出了必要的验证之外,还要自动的切换焦点,自动的页面上移。做了一下,没多久就实现了这个功能,贴出代码来

      

        /********动态填写学号********/
        $("#userInfoList input").each(function(index){
            var $tr_height=$(this).parents("tr").height();
            //$("#overlay").height($tr_height);
            $(this).focus(function(){
                $(this).parents("tr").addClass("hover").siblings().removeClass("hover");
                this.select();
            });
            $(this).keyup(function(e){
                if(e.which==13){
                    var currentNum=$(this).val();
                    if(!(/^\d*$/.test(currentNum))){
                        $(this).next().text("请输入数字!");
                        return false;
                    }else{
                        currentNum=currentNum*1;
                        $(this).next().text("");
                        if($("#userInfoList input").length==index+1){
                            $(this).parents("tr").addClass("hover").siblings().removeClass("hover");
                            $("html").animate({"scrollTop":0},500);
                            $("#userInfoList input").get(0).select();
                        }else{
                            $("html").animate({"scrollTop":$tr_height*(index+1)},500);
                            $("#userInfoList input").eq(index+1).val(currentNum+1);
                            $("#userInfoList input").get(index+1).select();      
                        }
                    }
                    /*$.post(url,function(data){
                        $("html").animate({"scrollTop":310*(index+1)},500);
                        $("#userInfoList input").get(index+1).select();
                    })*/
                    
                }
            });
            
        });
        
        /************学号预设***************/
        $("#resetNum").click(function(){
            $("#userInfoList input").each(function(index){
                $(this).val(index+1);
            });
        });
    })

    基本就实现了如下的功能:

    自动表单验证

    自动切换焦点到下一行

    高亮焦点所在行

    自动累加下一个序号

    提供预设功能,重置之前的所有序号

  • 相关阅读:
    Linux和windows 查看程序、进程的依赖库的方法
    ida pro 使用
    sql server相关
    nginx 日志log_format格式
    .yml文件格式
    svn加锁设置
    包含目录、库目录、附加包含目录、附加库目录、附加依赖项之详解
    visual studio 2017 (vs2017安装)
    OpenResty编译安装
    微信扫描二维码登录网站技术原理
  • 原文地址:https://www.cnblogs.com/caichongdd/p/2739232.html
Copyright © 2011-2022 走看看