添加姓名与邮箱email

最新推荐文章于 2023-01-16 10:13:30 发布

gh323093

最新推荐文章于 2023-01-16 10:13:30 发布

阅读量3.4k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/gh323093/article/details/78505425

版权

Web前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <title>模拟</title>
    <style>
        span{
            font-family: 楷体;
            font-size: 14px;
            color: red;
        }
        select{
            width: 150px;
            height: 20px;
        }
        a{
            text-decoration: none;
        }
    </style>
    <script type="text/javascript" src="../jquery-1.11.1/jquery-2.1.0.js" ></script>
    <script type="text/javascript" src="../angular-1.5.5/angular.min.js" ></script>

    <script>
        //angularjs处理省级联动
        angular.module("app",[]).controller("mycontr",function($scope){
            $scope.shengname=["北京","江苏","河南"];
            $scope.selectCh=function(){
                var yxsheng=$scope.yixuansheng;
                if(yxsheng==="北京"){
                    $scope.shiarr=["房山","黄埔","朝阳","海淀"];
                }else if("江苏"===yxsheng){
                    $scope.shiarr=["苏州","淮安","宿迁","南京"];
                }else if("河南"===yxsheng){
                    $scope.shiarr=["安阳","郑州","洛阳","驻马店"];
                }
            }
        });
        $(function(){
            //点击按钮验证判断
            $("#but").click(function(){
                var name=$("#name").val();
                var email=$("#email").val();
                var tel=$("#tel").val();
                var sheng=$("#sheng option:selected").val();
                var shi=$("#shi option:selected").val();
                var mytable=$("#mytable");
                var kai1=false;
                var kai2=false;
                var kai3=false;
                if(name!=null&name!=""){
                    kai1=true;
                }
                if(email.match("@")){
                    kai2=true;
                }
                var tt=parseInt(tel);
                if(tel==tt&tel.length==11){
                    kai3=true;
                }
                if(kai1&kai2&kai3){
                    var tr=$("<tr><td>"+name+"</td><td>"+email+"</td><td>"+tel+"</td><td>"+sheng+"</td><td>"+shi+"</td><td><a href='#' οnclick='shan(this)'>Delete</a></td></tr>");
                    mytable.append(tr);
                    mytable[0].style.display="block";
                }else{
                    alert("姓名或email或电话 验证不通过!")
                }
            });
        });

        //点击删除
        function shan(obj){
            var tr=$(obj).parent().parent();
            tr.remove();
            var size=$("#mytable tr").length;
            if(size==1){
                $("#mytable")[0].style.display="none";
            }
        }
    </script>
</head>

<body>
<form>
    <table width="400px" style="margin: auto;" ng-controller="mycontr">
        <tr>
            <td colspan="2" style="text-align: center;"><h2>添加用户</h2></td>
        </tr>
        <tr style="text-align: center;">
            <td>姓名:</td>
            <td><input type="text" id="name" placeholder="请输入用户名" />
                <span></span>
            </td>
        </tr>
        <tr style="text-align: center;">
            <td>email:</td>
            <td><input type="text" id="email" placeholder="请输入email"/>
                <span></span>
            </td>
        </tr>
        <tr style="text-align: center;">
            <td>电话:</td>
            <td><input type="text" id="tel" placeholder="请输入手机号"/>
                <span></span>
            </td>
        </tr>
        <tr style="text-align: center;">
            <td>省份:</td>
            <td>
                <select id="sheng" ng-change="selectCh()" ng-model="yixuansheng">
                    <option value="" style="display: none;">---请选择---</option>
                    <option ng-repeat="ss in shengname">{{ss}}</option>
                </select>
            </td>
        </tr>
        <tr style="text-align: center;">
            <td>城市:</td>
            <td>
                <select id="shi">
                    <option value="" style="display: none;">---请选择---</option>
                    <option ng-repeat="shi in shiarr">{{shi}}</option>
                </select>
            </td>
        </tr>
        <tr style="text-align: center;">
            <td colspan="2"><input type="submit" id="but" value="添加"/> </td>
        </tr>
    </table>
</form>
<br />
<br />
<table width="500px" border="1" id="mytable" style="margin: auto;display: none;">
    <tr style="text-align: center;">
        <th>姓名</th>
        <th>email</th>
        <th>电话</th>
        <th>省份</th>
        <th>城市</th>
        <th>删除</th>
    </tr>
</table>
</body>
</html>

gh323093

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
添加姓名与邮箱email

html>html ng-app="app">head> meta charset="utf-8" /> title>模拟title> style> span{ font-family: 楷体; font-size: 14px; color: red; }
复制链接

扫一扫