表单验证table表格添加数据

最新推荐文章于 2024-04-30 14:45:25 发布

sui_yz

最新推荐文章于 2024-04-30 14:45:25 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/sui_yz/article/details/78995763

版权

<!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 οnclick=\"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" οnchange="chan()">
               <option>请选择</option>
               <option value="0">北京</option>
               <option value="1">河北</option>
           </select>

           <select id="city">
              <option id="cityz">请选择</option>
           </select><br />

       <button οnclick="add()">添加</button>
       <button οnclick="xuanall()">全选/反选</button>
       <button οnclick="delall()">批量删除</button>

       <table width="400" cellspacing="0" border="1">
           <tr style="background-color: #999999;">
               <th><input type="checkbox" id="cks" οnchange="xuan(this)"/></th>
               <th>姓名</th>
               <th>性别</th>
               <th>生日</th>
               <th>住址</th>
               <th>删除 </th>
           </tr>

       </table>
   </body>
</html>

sui_yz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单验证table表格添加数据

function chan(){ $("#cityz").siblings().remove(); var shi=[["西二旗","海淀区"],["承德市","邯郸市"]]; var sheng=$("#sheng").val();
复制链接

扫一扫