<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #sub{ background: chartreuse; width: 80px; height: 30px; border-radius: 15%; } #quan_fan{ background: yellow; width: 80px; height: 30px; border-radius: 15%; } #p_shan{ background: red; width: 80px; height: 30px; border-radius: 15%; } table{ width: 600px; height: 100px; border-collapse: collapse; } th{ padding: 8px; border: 1px solid #000000; } </style> <script src="../jquery-1.11.1/jquery-2.1.0.js"></script> <script type="text/javascript"> $(function(){ var qu_bj = ["西二旗", "西三旗", "回龙观"]; var qu_sy = ["沈北新区", "和平区", "皇姑区"]; for(var i = 0; i < qu_bj.length; i++){ var $opt = $("<option></option>"); $opt.html(qu_bj[i]); $opt.attr("value", qu_bj[i]); if(qu_bj[i] == "西二旗"){ $opt.attr("selected", "selected"); } $("#qu").append($opt); } $("#city").change(function(){ var city = $("#city").val(); if(city == "北京"){ add_opt(qu_bj); }else if(city == "沈阳"){ add_opt(qu_sy); } }) function add_opt(arr){ $("#qu").children().remove(); for(var i = 0; i < arr.length; i++){ var $opt = $("<option></option>"); $opt.html(arr[i]); $opt.attr("value", arr[i]); $("#qu").append($opt); } } function ghbs(){ $("#mytbody tr:even").css("background-color", "brown"); $("#mytbody tr:odd").css("background-color", "burlywood"); } $("#sub").click(function(){ var name = $("#name").val(); var reg1 = /^[\x00-\xff]{3,30}$/; var flag1 = false; if(reg1.test(name)){ alert("姓名必须为3-30个汉字"); flag1 = false; }else{ flag1 = true; } var sex = $("#sex").val(); //alert(sex); var birth = $("#birth").val(); var flag2 = false; if(birth.trim() == "" || birth == null){ alert("生日不能为空"); flag2 = false; }else{ flag2 = true; } var city = $("#city").val(); var qu = $("#qu").val(); if(flag1 && flag2){ $("#mytable").attr("style", "display=block"); var $mytr = $("<tr></tr>"); var $mytd1 = $("<td></td>"); var $mycb = $("<input type='checkbox' />"); $mytd1.html($mycb); var $mytd2 = $("<td></td>"); $mytd2.html(name); var $mytd3 = $("<td></td>"); $mytd3.html(sex); var $mytd4 = $("<td></td>"); $mytd4.html(birth); var $mytd5 = $("<td></td>"); $mytd5.html(city+"-"+qu); var $mytd6 = $("<td></td>"); var $mybtn = $("<button>删除</button>"); $mybtn.click(function(){ var isDel = confirm("是否确定删除?"); if(isDel){ $mybtn.parent().parent().remove(); ghbs(); if($("#mytbody").children() == 0){ $("#mytable").attr("style", "display=none"); } } }) $mytd6.html($mybtn); $mytr.append($mytd1); $mytr.append($mytd2); $mytr.append($mytd3); $mytr.append($mytd4); $mytr.append($mytd5); $mytr.append($mytd6); $("#mytbody").append($mytr); ghbs(); } }) $("#quan_fan").click(function(){ if($("input[type='checkbox']:checked").length == 0){ $("input[type='checkbox']").each(function(){ $(this).prop("checked", true); }) }else{ $("input[type='checkbox']").each(function(){ if($(this).is(":checked")){ $(this).prop("checked", false); }else{ $(this).prop("checked", true); } }) } }) $("#p_shan").click(function(){ if($("input[type='checkbox']:checked").length == 0){ alert("需要先选中数据!"); }else{ var isDel = confirm("是否确定删除?"); if(isDel){ $("input[type='checkbox']:checked").parent().parent().remove(); } } }) }) </script> </head> <body> 姓名:<input id="name" type="text"/> 性别:<select id="sex" style="height: 20px;"> <option value="男">男</option> <option value="女">女</option> </select> 生日:<input id="birth" type="text" /> 住址:<select id="city"> <option value="北京" selected="selected">北京</option> <option value="沈阳">沈阳</option> </select> <select id="qu"></select> <input type="button" id="sub" value="提交" /><br /> <button id="quan_fan" style="margin-left: 650px;margin-top: 10px;">全选/反选</button> <button id="p_shan" style="margin-left: 20px;margin-top: 10px;">批量删除</button> <table id="mytable" style="margin-top: 30px;display: none;" border="1px" cellspacing="0"> <thead> <tr> <th>选择</th> <th>姓名</th> <th>性别</th> <th>生日</th> <th>住址</th> <th>删除</th> </tr> </thead> <tbody id="mytbody"></tbody> </table> </body> </html>
angularJS省市联动
最新推荐文章于 2018-09-05 21:58:58 发布