前端的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. HDU 1009 FatMouse' Trade （贪心算法）

    题意:就是老鼠要用猫粮换粮食,第i个房间一些东西,要用东西去换,可以不全换.问给定的猫粮最多能换多少粮食. 析:贪心算法.我们先算出来每个房间物品的平均价格是多少,肯定越低越好,并且如果能全换就全换, ...

  2. I2C总线驱动框架详解

    一.I2C子系统总体架构 1.三大组成部分 (1)I2C核心(i2c-core):I2C核心提供了I2C总线驱动(适配器)和设备驱动的注册.注销方法,I2C通信方法(”algorithm”)上层的,与 ...

  3. WriteableBitmap（一）

    通常,WPF中的位图是不可变的.不可变的位图非常有效,如果您希望进行大量的动态更改,创建和销毁它们的开销会变得非常昂贵.在这种情况下,您需要一些更灵活的东西——WriteableBitmap. Wri ...

  4. Scala类型检查与转换

    Scala类型检查与转换 isInstanceOf:检查某个对象是否属于某个给定的类. asInstanceOf:将引用转换为子类的引用. classOf:如果想测试p指向的是一个Employee对象 ...

  5. QTP之回放模式（ReplayType）

    QTP的回放模式有两种,如下所示: 1.  Event模式  --  事件跟踪 2.  Mouse模式 --   鼠标跟踪 Event模式就是我们平时默认用的模式,也就是事件,其实QTP的click方 ...

  6. [Openwrt 项目开发笔记]：Openwrt平台搭建（一）补遗

    [Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 昨晚上熬夜写了[Openwrt项目开发笔记]:O ...

  7. Spring Boot 应用系列 1 -- Spring Boot 2 整合Spring Data JPA和Druid，双数据源

    最近Team开始尝试使用Spring Boot + Spring Data JPA作为数据层的解决方案,在网上逛了几圈之后发现大家并不待见JPA,理由是(1)MyBatis简单直观够用,(2)以Hib ...

  8. Create Index语句的Include作用

    在 SQL Server 2005 中,可以通过将非键列添加到非聚集索引的叶级别来扩展非聚集索引的功能.通过包含非键列,可以创建覆盖更多查询的非聚集索引.这是因为非键列具有下列优点: 它们可以是不允许 ...

  9. 记录.NET Core部署到Linux之.NET Core环境搭建(1)

    1.在安装.NET之前,您需要注册Microsoft密钥.注册产品存储库和安装所需的依赖项. 启动我们的虚拟机,输入以下命令: sudo rpm -Uvh https://packages.micro ...

  10. Linear and Quadratic Programming Solver ( Arithmetic and Algebra） CGAL 4.13 -User Manual

    1 Which Programs can be Solved? This package lets you solve convex quadratic programs of the general ...