jQuery登入增刪改查小demo
阿新 • • 發佈：2019-02-08
| <!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> |
| $(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>"); |
| //建立tr |
| var tr = $("<tr>"); |
| //向tr中追加td |
| tr.append(tCheckbox).append(tName).append(tPwd).append(tAge).append(tSex).append(tCity); |
| //把tr放到tbody中 |
| $("tbody:eq(1)").append(tr); |
| }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; |
| } |
| }); |
| }); |
| </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>批量刪除</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> |
| </tr> |
| </thead> |
| <tbody> |
| </tbody> |
| </table> |
| </center> |
| </body> |
| </html> |