表单注册并删除
来源:互联网 发布:淘宝店铺认证复核在哪 编辑:程序博客网 时间:2024/04/26 19:59
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>week2模拟</title> <script type="text/javascript" src="js/jQuery-2.1.0/jquery-2.1.0.js" ></script> <script> $(function (){ var arr = [ ["东城","西城","崇文","宣武","朝阳","丰台","石景山","海淀","门头沟","房山","通州","顺义","昌平","大兴","平谷","怀柔","密云","延庆" ] , ["黄浦","卢湾","徐汇","长宁","静安","普陀","闸北","虹口","杨浦","闵行","宝山","嘉定","浦东","金山","松江","青浦","南汇","奉贤","崇明"] , ["和平","东丽","河东","西青","河西","津南","南开","北辰","河北","武清","红挢","塘沽","汉沽","大港","宁河","静海","宝坻","蓟县" ] , ["万州","涪陵","渝中","大渡口","江北","沙坪坝","九龙坡","南岸","北碚","万盛","双挢","渝北","巴南","黔江","长寿","綦江","潼南","铜梁","大足","荣昌","壁山","梁平","城口","丰都","垫江","武隆","忠县","开县","云阳","奉节","巫山","巫溪","石柱","秀山","酉阳","彭水","江津","合川","永川"] ]; var flag1=false; var flag2=false; var flag3=false; var flag4=false; var $name=$("#name"); var $pwd=$("#pass"); var $age=$("#age"); var $provence=$("#provence"); var $city=$("#city"); $name.blur(function(){ if($name.val()==""){ alert("请输入用户名"); }else{ flag1=true; } }); $pwd.blur(function() { var $pl = $pwd.val().length; if($pl > 4 && $pl < 16) { flag2 = true; } else { alert("长度在4-16位之间"); flag2 = false; } }); $age.blur(function() { if($age.val() < 1 || $age.val() > 300) { alert("请输入正确的年龄"); flag3 = false; } else { flag3 = true; } }); $provence.change(function(){ $("#city option").remove(); var ind=$(this).val(); for(c in arr[ind]){ var $city=$("#city"); var $cs=$("<option>"+arr[ind][c]+"</option>"); $city.append($cs); } }); $("#btn").click(function(){ if(flag1 && flag2 && flag3){ var $namev=$("#name").val(); var $pwdv=$("#pass").val(); var $agev=$("#age").val(); var $sexv=$("input[name='sex']:checked").val(); var $provencev=$("#provence option:selected").html(); var $cityv=$("#city option:selected").html(); var $data=$("#data"); var a=$("<tr><td><input type='checkbox'><td>"+$namev+"</td><td>"+$pwdv+"</td><td>"+$agev+"</td><td>"+$sexv+"</td><td>"+$provencev+"-"+$cityv+"</td></td></tr>"); $data.append(a); }else{ alert("请按要求输入信息"); } }); }); </script> <script> $(function(){ $("#all").click(function(){ var fl=$(this).prop("checked"); alert(fl); if(fl){ var $ch=$(":checkbox"); $ch.each(function(index,element){ $ch[index].checked=true; }); }else{ //全不选 var $ch = $(":checkbox"); $ch.each(function(index, element) { $ch[index].checked=false; }); } }); $("#del").click(function(){ //data表格下有是checked且没有id属性的都删除 $("#data :checked").not("[id]").parent().parent().remove(); //移除所有被选中的input元素 }) }); </script> </head> <body> <h3 align="center">用户注册</h3> <table align="center" border="1px" cellspacing="0" > <tr> <th>用户名</th> <td><input type="text" placeholder="用户名不能为空" id="name"/></td> </tr> <tr> <th>密 码</th> <td><input type="password" placeholder="长度在4-16位之间" id="pass"/></td> </tr> <tr> <th>年 龄</th> <td><input type="number" placeholder="年龄必须是数字" id="age"/></td> </tr> <tr> <th>性 别</th> <td><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女</td> </tr> <tr> <th>住 址</th> <td>省<select id="provence"><option value=0>北京</option><option value=1>上海</option> <option value=2>天津</option> <option value=3>重庆</option></select> 市<select id="city"><option >海淀区</option></select> </td> </tr> <tr> <td colspan=2 align="center"><input type="button" value="提交" id="btn"/></td> </tr> </table><br /><br /> <center><button id="del">批量删除</button></center><br /><br /> <table align="center" border="1px" cellspacing="0" id="data"> <tr> <td><input type="checkbox" id="all"/></td> <th>用户名</th> <th>密 码</th> <th>年 龄</th> <th>性 别</th> <th>住 址</th> </tr> </table> </body></html>
阅读全文
0 0
- 表单注册并删除
- javascript表单注册批量删除单选复选全选
- dwr防止注册用户重复,并防止表单提交
- 使用Flask form 制作注册表单,并使用bootstrap美化
- 注册表单
- 表单注册
- 注册表单
- 注册表单
- 注册表单
- SharePoint 2013 基于数据库的表单认证FBA,并添加注册界面
- 用js动态添加登录表单并完成提交实现在html注册后自动登录
- 用jsp+Servlet实现简单的提交表单并显示的注册
- js注册表单验证
- ajax 注册表单验证
- 用户表单注册
- 如何设计注册表单
- 表单注册验证
- 【JavaWeb】验证注册表单
- 2017/11/11
- javascript表单注册批量删除单选复选全选
- Drawerlayout
- XRecycleView
- python 类定义和实例化使用
- 表单注册并删除
- RecycleView的多条目
- CSS3中的动画
- 练习2
- Rxdownload1.1.0(断点续传)
- C++数据结构学习笔记一——数据结构基础理论
- Sqlite
- android 之登录注册用户信息
- java技术体系基础