您的位置：首页 > 其它

表单验证table表格添加数据

2018-01-07 16:57 691 查看

<!DOCTYPE html>

<html>

   <head>

       <meta charset="UTF-8">

       <title></title>



       <script src="js/jquery-1.11.1.js"></script>

       <script>



           function chan(){

               $("#cityz").siblings().remove();



               var shi=[["西二旗","海淀区"],["承德市","邯郸市"]];

               var sheng=$("#sheng").val();

               var city=$("#city");

               for (var i=0;i<shi[sheng].length;i++) {

                   city.append("<option>"+shi[sheng][i]+"</option>");

               }

           }



           function add () {

               var uname=$("#uname").val();

               var sex=$("#sex option:selected").text();

               var bir=$("#bir").val();

               var sheng=$("#sheng option:selected").text();

               var city=$("#city option:selected").val();

               if (uname.length<3 || uname.length>20 || sex=="" || bir=="" || sheng=="请选择" || city=="请选择") {

                   alert("输入信息有误!");

               } else{

                   $("table").append("<tr><td><input type=\"checkbox\" name=\"ck\"/></td><td>"+uname+"</td><td>"+sex+"</td><td>"+bir+"</td><td>"+sheng+"-"+city+"</td><td><button onclick=\"del(this)\">删除</button></td></tr>");

               }

           }



           function del(e){

               e.parentNode.parentNode.remove();

           }



           function delall(){

               var checks=$(":checked[name=ck]");

               if (checks.length==0) {

                   alert("请至少选择一条删除！");

                   return;

               }



               for(var i in checks){

                   checks[i].parentNode.parentNode.remove();

               }

           }



           function xuan(e){

               var ckss=$("input[name=ck]");

               for (var i in ckss) {

                   ckss[i].checked=e.checked;

               }

           }



           function xuanall(){

               var ckss=$("input[name=ck]")

               for(var i in ckss) {

                   if (ckss[i].checked==false) {

                       ckss[i].checked=true;

                   } else{

                       ckss[i].checked=false;

                   }

               }

           }

       </script>

   </head>



   <body>



       姓名：<input id="uname" />

       性别：<select id="sex"><option>男</option><option>女</option></select>

       生日：<input id="bir" type="date" />

       住址：<select id="sheng" onchange="chan()">

               <option>请选择</option>

               <option value="0">北京</option>

               <option value="1">河北</option>

           </select>



           <select id="city">

              <option id="cityz">请选择</option>

           </select><br />



       <button onclick="add()">添加</button>

       <button onclick="xuanall()">全选/反选</button>

       <button onclick="delall()">批量删除</button>



       <table width="400" cellspacing="0" border="1">

           <tr style="background-color: #999999;">

               <th><input type="checkbox" id="cks" onchange="xuan(this)"/></th>

               <th>姓名</th>

               <th>性别</th>

               <th>生日</th>

               <th>住址</th>

               <th>删除 </th>

           </tr>



       </table>

   </body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航