JS,angularJS 实现栏目的添加和删除

最新推荐文章于 2018-12-06 17:27:00 发布

余生I

最新推荐文章于 2018-12-06 17:27:00 发布

阅读量1w

点赞数 1

分类专栏： angularJS JS

本文链接：https://blog.csdn.net/qq_39357892/article/details/78082881

版权

angularJS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>

<input type="text" id="name" οnblur="yz()">
<p></p>
<h2></h2>
<h3></h3>
<input type="radio" value="男" name="sex">男
<input type="radio" value="女" name="sex">女<br>
<input type="checkbox" value="项目" name="message">项目
<input type="checkbox" value="文档" name="message">文档
<input type="checkbox" value="物品" name="message">物品
<input type="checkbox" value="智能" name="message">智能
<button>zhu</button>
<table border="1" cellspacing="0">
    <tr id="t">
        <td><input type="checkbox" id="quan">全选</td>
        <td>性别</td>
        <td>需要</td>
        <td>操作</td>
    </tr>
</table>
<script src="JQ/Jquery/jquery-1.12.0.min.js"></script>
<script>
    function yz() {
        var name=$("#name").val();
        if(name.length<10)
        {
            alert(0);
        }
    }
    $("button").click(function () {
        var name=$("#name").val();
        var s=name.substr(name.length-4,name.length);
        if(name.indexOf("@")>=0&&s==".com"){
            $("p").text("√");
        }else{
            $("p").text("×");
        }
        var val=$(":input[name='sex']:checked").val();
        var valbox=$(":input:checkbox[name='message']:checked").map(function (index,el) {
            return $(el).val();
        }).get().join(",");
        $("h2").text(val);
        $("h3").text(valbox);
        $("#t").after("<tr><td><input type='checkbox' class='dan'></td><td>"+val+"</td><td>"+valbox+"</td><td><button class='de'>删除</button></td></tr>");
        $(".de").click(function () {
            $(this).parent().parent().remove();
        });
        $("#quan").click(function () {
            if($("#quan").is(":checked"))
            {
                $(".dan").prop("checked",true);
            }else {
                $(".dan").prop("checked",false);
            }
        });
    });


</script>
</body>
</html>
angularJS
 
 
  
  
  
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            text-align: center;
        }
        ul{
            margin: 10px auto;
            list-style: none;
            width: 600px;
            height: 600px;
            border: 1px solid #000000;
            text-align: center;
        }
        ul li{
            width: 120px;
            height: 60px;
            margin: 20px;
            border: 1px solid #000000;
            line-height: 60px;
            float: left;
        }
        span{
            padding-left: 10px;
        }
    </style>
    <script src="jq/jquery-3.2.1.min.js"></script>

</head>
<body>
<div class="box">
    <ul></ul>
</div>
<button>语文</button>
<button>数学</button>
<button>英语</button>
<button>政治</button>
<button>历史</button>
<button>体育</button>
<button>地理</button>
<script>
    var buts=document.getElementsByTagName("button");
    for(var i=0;i<buts.length;i++){
        buts[i].onclick=function () {
            var li="<li>"+$(this).html()+"<span>✘</span></li>";
            var lis=document.getElementsByTagName("li");
            var is=false;
            for(var i=0;i<lis.length;i++)
            {
                is=false;
                console.log("<li>"+lis[i].innerHTML+"</li>"+"-----");
                console.log(li+"=====");
                if(li=="<li>"+lis[i].innerHTML+"</li>")
                {
                    console.log("进来了");
                    is=true;
                    break;
                }else {
                    is=false
                }
            }
            if(is==false)
            {
                $("ul").append(li);
            }
            var sp=document.getElementsByTagName("span");
            for(var i=0;i<sp.length;i++) {
                sp[i].onclick = function () {
                    $(this).parent().remove();
                }
            }
        }

    }

</script>
</body>
</html>

余生I

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS,angularJS 实现栏目的添加和删除

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> style>head>body>input type="text" id="name" onblur="yz()">p>p>h2>h2>h3>h3>input type="radio" value="
复制链接

扫一扫

专栏目录