增删改插
来源:互联网 发布:多益网络线上二笔 编辑:程序博客网 时间:2024/05/16 17:19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>第二周模拟考试</title> <script src="../../../代码/4.jQuery/jQuery-2.1.0/jquery-2.1.0.js"></script> <style> .odd{ background-color:blue; } .even{ background-color:red; } </style> <script> $(function(){ //按钮点击事件 $("#sub").click(function(){ var flag1 = flag2 = flag3 = flag4 = false; //用户名非空 var name = $("#name").val(); if(name == null || name == ""){ //alert("用户名不能为空"); $("span").text("用户名不能为空"); flag1 = false; }else{ $("span").text(); flag1 = true; } //密码长度验证 var pwd = $("#pwd").val(); var size = pwd.length; if(size < 4 || size >16){ alert("密码长度不正确"); flag2 = false; }else{ flag2 = true; } //年龄必须是数字(先验证非空) var age = $("#age").val(); if(isNaN(age)){ alert("年龄必须是数字"); flag3 = false; }else{ flag3 = true; } //验证性别必选 var sex = $("[name='sex']:checked"); var sex2 = sex.val(); var sexChecked = sex.size(); if(sexChecked != 1){ alert("性别必选"); flag4 = false; }else{ flag4 = true; } //提交成功追加数据 var privince = $("#privince").val(); var city = $("#city").val(); if(flag1 && flag2 && flag3 && flag4){ alert("成立"); //创建单元格 var tCheckbox = $("<th><input class='check' type='checkbox' /></th>"); var tName = $("<td>"+name+"</td>"); var tPwd = $("<td>"+pwd+"</td>"); var tAge = $("<td>"+age+"</td>"); var tSex = $("<td>"+sex2+"</td>"); var tCity = $("<td>"+privince+"-"+city+"</td>"); var tCtrl = $("<td></td>"); var tDel = $("<button class='del'>删除</button>"); tCtrl.append(tDel); //给按钮添加点击事件 tDel.click(function(){ //判断当前行有没有被选中 var result = $(this).parent().parent().children().eq(0).children(); if(result[0].checked){ //被选中了,删除即可 $(this).parent().parent().remove(); $("tbody:eq(1) tr").removeAttr("class"); $("tbody:eq(1) tr:odd").addClass("odd"); $("tbody:eq(1) tr:even").addClass("even"); }else{ alert("请选择"); } }); //创建tr var tr = $("<tr>"); //向tr中追加td tr.append(tCheckbox).append(tName).append(tPwd).append(tAge).append(tSex).append(tCity).append(tCtrl); //把tr放到tbody中 $("tbody:eq(1)").append(tr); $("tbody:eq(1) tr").removeAttr("class"); $("tbody:eq(1) tr:odd").addClass("odd"); $("tbody:eq(1) tr:even").addClass("even"); }else{ alert("asf"); } }); //二级联动 $("#privince").change(function(){ var privince = $(this).val(); if(privince == "北京"){ //选中北京怎么更改城市下拉菜单中的内容 var city = $("<option selected='selected'>海淀区</option><option>昌平区</option><option>朝阳区</option><option>大兴区</option>"); $("#city").html(city); } if(privince == "河北"){ var city = $("<option >石家庄</option><option>唐山</option><option>保定</option><option selected='selected'>邢台</option>"); $("#city").html(city); } if(privince == "山西"){ var city = $("<option selected='selected'>运城</option><option>太原</option><option>临汾</option><option>大同</option>"); $("#city").html(city); } }); //全选 var a = 0; $("#first").click(function(){ //var result = alert($(this).attr("checked")); //a = 1; if(a == 0){ //alert(); $(":checkbox").prop("checked","checked"); a = 1; }else{ //alert("asdf"); $(":checkbox").prop("checked",false); a = 0; } }); //批量删除 $("#deleteAll").click(function(){ var size = $("#delBody :checked").length; if(size<=0){ alert("请先选择"); }else{ if(window.confirm("确定要删除吗?")){ $("#delBody :checked").parent().parent().remove(); } } }); }); </script> </head> <body> <center> <h3>用户注册</h3> <table border="1px solid blue" cellpadding="10" cellspacing="0"> <form action="*"> <tbody> <tr> <th>用户名</th> <td><inputid="name"type="text"placeholder="用户名不能为空" /><span></span></td> </tr> <tr> <th>密 码</th> <td><inputid="pwd"type="text"placeholder="长度在4-16位之间" /></td> </tr> <tr> <th>年 龄</th> <td><inputid="age"type="text"placeholder="年龄必须是数字" /></td> </tr> <tr> <th>性 别</th> <td><inputname="sex"value="男"type="radio" />男<inputvalue="女"name="sex"type="radio" />女</td> </tr> <tr> <th>住 址</th> <td> 省<select id="privince"> <option>北京</option> <option>河北</option> <option>山西</option> </select> 市<select id="city"> <option>海淀区</option> <option selected="selected">昌平区</option> <option>朝阳区</option> <option>大兴区</option> </select> </td> </tr> <tr> <th colspan="2"><inputid="sub"type="submit"value="提交" /></th> </tr> </form> </tbody> </table><br /> <button id="deleteAll">批量删除</button><br /><br /> <table border="1px solid blue" cellpadding="10" cellspacing="0"> <thead> <tr> <th><inputid="first"type="checkbox" /></th> <th>用户名</th> <th>密 码</th> <th>年 龄</th> <th>性 别</th> <th>住 址</th> <th>操 作</th> </tr> </thead> <tbody id="delBody"> </tbody> </table> </center> </body> </html>
阅读全文
0 0
- 增删改插
- 购物车(增删改插)
- vc++ sqlite3 增删改插 例子
- HBase学习-表的增删改插
- 购物车4 增删改插
- oracle的增删改插和子查询
- Dom04-Dom对元素的增删改插
- 购物车:增删改插,隔行换色
- C语言【顺序表】顺序表的初始化,头插,尾插,头删,尾删,增删查改,全删
- 6.20 JLL--实习日志-- teneat关联Availabilty,retail 增删改插的函数理解
- 增删改
- treeview 增删改
- treeview 增删改
- 文件夹的增删改
- hibernate增删查改
- UltraWebGrid增删改(c#)
- XML 增删查改
- DataGridView 增删改
- Spring源码分析-深入浅出AOP(图文分析)
- spring redis 注解开发 单片机 集群 主从复制
- 分布式缓存Redis之Pipeline(管道)
- 设计模式(一)总纲
- 润乾集算器与帆软报表集成(直接通过jdbc,类DB存储过程方式调用)
- 增删改插
- Bootstrap3模板
- Java数组
- mysql乐观锁总结和实践
- 基于密度的聚类方法-OPTICS
- Java swing实现小游戏扫雷之扫雷游戏源码
- Qt :图片与QByteArray互转
- C++ 数据类型
- notepad++中json格式化工具