今天做了一个任务,让我实现动态在表格中的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); }); }); })
基本就实现了如下的功能:
自动表单验证
自动切换焦点到下一行
高亮焦点所在行
自动累加下一个序号
提供预设功能,重置之前的所有序号