Jquery增删改查

 <!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><input id="name" type="text" placeholder="用户名不能为空" /><span></span></td>
  
 </tr>
 <tr>
 <th>密 码</th>
 <td><input id="pwd" type="text" placeholder="长度在4-16位之间" /></td>
 </tr>
 <tr>
 <th>年 龄</th>
 <td><input id="age" type="text" placeholder="年龄必须是数字" /></td>
 </tr>
 <tr>
 <th>性 别</th>
 <td><input name="sex" value="" type="radio" /><input value="" 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"><input id="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><input id="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>
 
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值