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);
            });
        });
    })

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

    自动表单验证

    自动切换焦点到下一行

    高亮焦点所在行

    自动累加下一个序号

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

  • 相关阅读:
    【总结】——Repeater控件详细应用
    【SelfIntroduction in Optional Course】
    【软考之后的思考】
    打印菱形图案printDiamond
    【这是来自Word 2010 的Test】
    【30岁前挣够500万】
    【总结 CKEditor 和 CKFinder 的配置和使用】
    linux压缩(解压缩)命令详解 [转]
    关于吞吐量和并发度 [转]
    Linux的五个查找命令 [转]
  • 原文地址:https://www.cnblogs.com/caichongdd/p/2739232.html
Copyright © 2011-2022 走看看