前端的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. Map的常用操作

    public static void main(String[] args) { Map<String, String> map = new HashMap<>(); map. ...

  2. tornado+bootstrap急速搭建你自己的网站

    bootstrap既然是这么的流行又能省很多的事为什么不用他呢?再加上牛X的produced by FB的tornado简直如虎添翼了! 1. 安装配置 安装所需要的库等内容.这里没什么需要多讲的.t ...

  3. Hdu1401 Solitaire 2017-01-18 17:21 33人阅读 评论(0) 收藏

    Solitaire Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Sub ...

  4. 关闭父类弹出的ifream窗口

    parent.document.getElementById('zhuce').style.display = 'none';

  5. 基于Verilog HDL的二进制转BCD码实现

    在项目设计中,经常需要显示一些数值,比如温湿度,时间等等.在数字电路中数据都是用二进制的形式存储,要想显示就需要进行转换,对于一个两位的数值,对10取除可以得到其十位的数值,对10取余可以得到个位的数 ...

  6. Linux 用 sftp scp命令 互传文件

    sftp它类似于 ftp, 但它进行加密传输,比FTP有更高的安全性. sftp 是SSH服务的子程序 常用命令 pwd 查看当前工作目录 ls 查看远程当前目录下的所以文件或者目录信息 lls 查看 ...

  7. Redis连接异常

    1. 以指定配置文件启动Redis,否则配置的东西不生效 redis-cli shutdown 关闭 $ redis-server ./redis.conf 2.连接异常 redis.conf 配置文 ...

  8. ASP.NET MVC URL重写与优化(初级篇)-使用Global路由表定制URL

    ASP.NET MVC URL重写与优化(初级篇)-使用Global路由表定制URL 引言--- 在现今搜索引擎制霸天下的时代,我们不得不做一些东西来讨好爬虫,进而提示网站的排名来博得一个看得过去的流 ...

  9. datename和datepart

    select datename(year, getdate()) + 'aaa11' --不报错 datename返回的是nvarchar类型 select datalength(datename(y ...

  10. C# 动态生成Html地图文件

    public void GPSModel(string x, string y, string ss)//动态地图文件 { if (x.Contains("-") &&am ...