表单验证table表格添加数据

<!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>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值