前端的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. mysql 经典错误解决方案 :Incorrect string value 'xE6x95x85xE4xBAx8B...' for column

    1.关闭当前服务器2.删除正在使用的数据库drop database 数据库名字;3.查看字符集, SHOW VARIABLES LIKE 'character_set_%'; 把所有latin1的都 ...

  2. HDU 1061 Rightmost Digit （快速幂取模）

    题意:给定一个数,求n^n的个位数. 析:很简单么,不就是快速幂么,取余10,所以不用说了,如果不会快速幂,这个题肯定是周期的, 找一下就OK了. 代码如下: #include <iostrea ...

  3. cxf-rs 、spring 和 swagger 环境配置切换【github 有项目】

    环境切换的目的是 准生产和生产环境切换时,只修改一个文件就可以达到效果 在spring bean 文件中 配置: <bean class="cn.zno.common.context. ...

  4. post同步请求

    // http://api.hudong.com/iphonexml.do?type=focus-c     //post请求中url不带请求参数,请求参数在参数HTTPBody中设置, 需要创建可变 ...

  5. （KMP 最大表示最小表示）String Problem　-- hdu-- 3374

    http://acm.hdu.edu.cn/showproblem.php?pid=3374 String Problem Time Limit: 2000/1000 MS (Java/Others) ...

  6. android build.gradle(groovy)

    一.build.Gradle 这个 build.Gradle 文件来自 drakeet 大神的 Meizi 项目我直接在代码上加注释,参照着注释看代码就行,是不是发现有很多代码平时都没看见过. //M ...

  7. nodejs express hi-cms

    今天看一下hi-cm是怎么写的,理解一下流程,看一些亮点 它使用express3.x写的 1.app.set, app.get app.set('port', 3000); app.get('port ...

  8. java.util.Date与java.sql.Date的关系和转换方法(转)

    在ResultSet中我们经常使用的setDate或getDate的数据类型是java.sql.Date,而在平时java程序中我们一般习惯使用 java.util.Date. 因此在DAO层我们经常 ...

  9. maven下@override标签失效

    经常遇见此问题,现记录如下,以备下次查阅. 在pom文件添加配置: <plugin> <groupId>org.apache.maven.plugins</groupId ...

  10. Oracle EBS打补丁

    http://hutianci.iteye.com/blog/1457287 l例子: 打 Patch#   11843100:R12.CAC.B 打PATCH之前先查询一下是否已经有了这个PATCH ...