zoukankan      html  css  js  c++  java
  • 前端的CRUD增删改查的小例子

    前端的CRUD增删改查的小例子

    1.效果演示

    juzi.gif

    2.相关代码:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                 300px;
                margin: 0 auto;
            }
            ul{
                list-style: none;
            }
            ul li{
                height: 50px;
                border: 1px solid #b0b0b0;
                margin-top: 10px;
                line-height: 50px;
                padding-left: 10px;
            }
            ul li span{
                float: right;
                height: 30px;
                margin-top: 10px;
                color: #fff;
                line-height: 30px;
                font-size: 12px;
                padding: 0 10px;
            }
            ul li span.update{
                background-color: purple;
                margin:10px 20px;
            }
            ul li span.delete{
                background-color: red;
            }
            .addBtn{
                height: 50px;
                background-color: green;
                color: #fff;
                text-align: center;
                line-height: 50px;
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
    <div class="box">
        <ul>
            <li>苹果 <span class="update">修改</span><span class="delete">删除</span></li>
            <li>榴莲 <span class="update">修改</span><span class="delete">删除</span></li>
            <li>橘子 <span class="update">修改</span><span class="delete">删除</span></li>
            <li>香蕉 <span class="update">修改</span><span class="delete">删除</span></li>
            <li>西瓜 <span class="update">修改</span><span class="delete">删除</span></li>
        </ul>
        <div class="addBtn" id="addBtn">添加一项</div>
    </div>
    <script>
        var addBtn = document.getElementById('addBtn');
        var oUl = document.getElementsByTagName('ul')[0];
        var upds = document.getElementsByClassName('update');
        var dels = document.getElementsByClassName('delete');
        addBtn.onclick = function () {
            var res = prompt('请输入要添加的内容');//'aa' '' null
            if(res){
                var oLi = document.createElement('li');
                oLi.innerHTML = res+'<span class="update">修改</span><span class="delete">删除</span>';
                oUl.appendChild(oLi);
            }
        };
        //修改
        /* for(var i = 0; i < upds.length; i++){
         upds[i].onclick = function () {
         var res = prompt('请输入修改的内容');
         if(res){
         var oLi = document.createElement('li');
         oLi.innerHTML = res+'<span class="update">修改</span><span class="delete">删除</span>';
         this.parentNode.parentNode.replaceChild(oLi,this.parentNode);
         }
         }
         }
         //删除
         for (var i = 0; i < dels.length; i++){
         dels[i].onclick = function () {
         if(confirm('确定要删除该项吗?')){
         this.parentNode.parentNode.removeChild(this.parentNode);
         }
         }
         }*/
        //事件委托:利用事件冒泡的机制,将事件绑定给祖先元素,事件发生的时候通过判断事件源的具体信息来做相应的操作
        oUl.onclick = function (event) {//event事件对象
            event = event || window.event;//处理ie下兼容性
            var tar = event.target||event.srcElement; //事件源
            console.log(tar);
            if(tar.innerHTML === '修改'){
                var res = prompt('请输入修改的内容');
                if(res){
                    var oLi = document.createElement('li');
                    oLi.innerHTML = res+'<span class="update">修改</span><span class="delete">删除</span>';
                    oUl.replaceChild(oLi,tar.parentNode);
                }
            }
            if(tar.innerHTML === '删除'){
                if(confirm('确定要删除该项吗?')){
                    oUl.removeChild(tar.parentNode);
                }
            }
        }
    </script>
    </body>
    </html>
    
  • 相关阅读:
    【LeetCode】336.回文对(前缀树,散列,暴力三种方法,java实现)
    Python爬虫入门教程 72-100 分布式爬虫初步解析-配好环境肝完一半
    net.ipv4.tcp_max_tw_buckets=10
    tcp_fin_timeout
    程序停掉close_wait立马回收
    net.ipv4.tcp_tw_reuse = 1 重用time_wait
    做了3年数据报表却毫无进步?看过这3种方法的人,都被领导重视了
    【LeetCode】212.单词搜索 II (前缀树两种方法实现)
    Linux C/C++编程之(十三)系统IO函数
    《java入门第一季》之面向对象匿名内部类面试题
  • 原文地址:https://www.cnblogs.com/charlypage/p/9715478.html
Copyright © 2011-2022 走看看