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

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

    自动表单验证

    自动切换焦点到下一行

    高亮焦点所在行

    自动累加下一个序号

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

  • 相关阅读:
    RFM模型
    mysql日期函数(时间函数)
    数据库探索
    anaconhda安装步骤
    mysql安装和环境配置
    mysql时间条件查询
    mysql自连接
    mysql查询注意事项(查询优化)
    mysql常见的保留字和反引号使用
    多表联合查询注意事项(索引)
  • 原文地址:https://www.cnblogs.com/caichongdd/p/2739232.html
Copyright © 2011-2022 走看看