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

1.效果演示

2.相关代码:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .box{

            width: 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>

前端的CRUD增删改查的小例子的更多相关文章

  1. 使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序

    使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序 不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻 ...

  2. yii2-basic后台管理功能开发之二：创建CRUD增删改查

    昨天实现了后台模板的嵌套,今天我们可以试着创建CRUD模型啦 刚开始的应该都是“套用”,不再打算细说,只把关键的地方指出来. CRUD即数据库增删改查操作.可以理解为yii2为我们做了一个组件,来实现 ...

  3. 创建支持CRUD(增删改查)操作的Web API(二)

    一:准备工作 你可以直接下载源码查看 Download the completed project.     下载完整的项目 CRUD是指“创建(C).读取(R).更新(U)和删除(D)”,它们是四个 ...

  4. 【EF6学习笔记】（二）操练 CRUD 增删改查

    本篇原文链接: Implementing Basic CRUD Functionality 说明:学习笔记参考原文中的流程,为了增加实际操作性,并能够深入理解,部分地方根据实际情况做了一些调整:并且根 ...

  5. EF6 学习笔记（二）：操练 CRUD 增删改查

    EF6学习笔记总目录 ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 接上篇: EF6 学习笔记(一):Code First 方式生成数据库及初始化数据库实际操作 本篇原文链接: I ...

  6. 一起学Vue：CRUD(增删改查)

    目标 使用Vue构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式. 效果页面 比如我们要实现这样列表.新增.编辑三个页面: 列表页面 新增页面 编辑页面 我们把这些用户信息保存到Todo ...

  7. MybatisPlus核心功能——实现CRUD增删改查操作 (包含条件构造器)

    CRUD 官方文档:https://baomidou.com/ (建议多看看官方文档,每种功能里面都有讲解)[本文章使用的mybatisplus版本为3.5.2] 条件构造器 一般都是用service ...

  8. Mybatis的CRUD 增删改查

    目录 namespace 命名空间 select insert update delete Mybatis 官网: https://mybatis.org/mybatis-3/zh/getting-s ...

  9. 动态网站项目（Dynamic Web Project）CRUD(增删改查)功能的实现(mvc(五层架构)+jdbc+servlet+tomcat7.0+jdk1.8)，前端使用JSP+JSTL+EL组合

    代码分享链接 https://pan.baidu.com/s/1UM0grvpttHW9idisiqa6rA    提取码:hx7c 图示           项目结构 1.SelectAllUser ...

随机推荐

  1. Codeforces807 A. Is it rated? 2017-05-08 23:03 177人阅读 评论(0) 收藏

    A. Is it rated? time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  2. WPF 标签预览可以显示图片运行后不显示

    使用<Image HorizontalAlignment="Left" Height="100" Margin="106,111,0,0&quo ...

  3. boot分区剩余空间不足

      Linux boot分区用于存放内核文件以及Linux一些启动配置文件,一般情况下分区大小为500M足够使用,如果出现空间不足的问题可以使用以下方法来解决. 查看已经安装的内核 dpkg --ge ...

  4. [LeetCode 总结帖]: 链表专题

    链表在笔试面试中都是出镜率极高的一种数据结构. 由于链表具有结构简单,代码量较少,变化多,可以较为全面的考察应聘者的逻辑思考能力以及应变能力的特点,而备受面试官青睐. 在本节中,我将Leetcode中 ...

  5. FP-Growth in Spark MLLib

    并行FP-Growth算法思路 上图的单线程形成的FP-Tree. 分布式算法事实上是对FP-Tree进行分割,分而治之 首先,假设我们只关心...|c这个conditional transactio ...

  6. 一起学习MVC（3）Views的学习

          _ViewStart.cshtml._Layout.cshtml.Index.cshtml三个页面加载时候的先后顺序就是: _Layout.cshtml ViewStart.cshtml ...

  7. 曲演杂坛--重建索引后，还使用混合分区么？（Are mixed pages removed by an index rebuild?）

    原文来自:http://www.sqlskills.com/blogs/paul/mixed-pages-removed-index-rebuild/ 在SQL SERVER 中,区是管理空间的基本单 ...

  8. C#远程桌面连接工具

    1.注册控件:regsvr32 C:\Windows\System32\mstscax.dll. 2.添加RDP Control控件到工具箱中.我选择的RDP Client Control (redi ...

  9. RabbitMQ基础入门篇

    下载安装 Erlang RabbitMQ 启动RabbitMQ管理平台插件 DOS下进入到安装目录\sbin,执行以下命令 rabbitmq-plugins enable rabbitmq_manag ...

  10. 基于RBAC设计的通用权限管理框架

    RoadFlow拥有基于RBAC设计的通用权限管理框架.不仅可以基于角色组进行菜单授权,还可以根据组织架构中部门.岗位.人员等进行细分的权限管理分配. 如果一个人有重复菜单权限,则将自动合并. 系统资 ...