动态的录入信息

  今天做了一个任务,让我实现动态在表格中的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);
        });
    });
})

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

自动表单验证

自动切换焦点到下一行

高亮焦点所在行

自动累加下一个序号

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

posted on 2012-10-25 17:31  菜虫Leo  阅读(222)  评论(0编辑  收藏  举报

导航