前端的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. 理解Defer、Panic和Recover

    刚开始的时候理解如何使用Defer和Recover有一点怪异,尤其是使用了try/catch块的时候.有一种模式可以在Go中实现和try/catch语句块一样的效果.不过之前你需要先领会Defer.P ...

  2. Python初学者的捷径[译]

    下面列出的都是这些年总结的Python的有用的知识点和一些工具.希望对你有所帮助! 交换变量值 x = 6 y = 5 x, y = y, x print x >>> 5 print ...

  3. centos7安装 docker

    centos7安装 docker 切换到 root用户,执行: [root@localhost frinder]# yum install docker已加载插件:fastestmirror, lan ...

  4. HDU1241 Oil Deposits 2016-07-24 13:38 66人阅读 评论(0) 收藏

    Oil Deposits Problem Description The GeoSurvComp geologic survey company is responsible for detectin ...

  5. Spring的@ModelAttribute注解

    1. 一.绑定请求参数到指定对象 public String test1(@ModelAttribute("user") UserModel user) 只是此处多了一个注解@Mo ...

  6. 摘抄-----java codeReview要做的事

    整洁的代码 清单项目 分类 使用可以表达实际意图(Intention-Revealing)的名称 有意义的名称 每一个概念只用一个词 有意义的名称 使用方案/问题领域名称 有意义的名称 类应该是比较小 ...

  7. Git小技巧：VIM中如何填写注释信息

    使用Git命令行工具的时候,经常一不小心就进入VIM界面,例如git commit没有填写任何描述信息.对于习惯了Windows可视化操作界面的用户,可能一下子会觉得无所适从,只能在键盘上一顿短按.下 ...

  8. python——排序

    从学校毕业出来后只知道冒泡排序,发现自己对排序的了解还是很浅显. 于是在网上搜索各种排序方法,以下是本人根据索搜出来的资料再结合自己理解作出的一些简单的阐述. 如果有不正确的地方欢迎大家指正.(共同学 ...

  9. VisualStudio神级插件Resharper的基本配置和使用技巧大全+Resharper性能优化

    所谓工欲善其事,必先利其器.尽管visual studio本身已经非常强大,但优秀的插件仍然可以帮开发者大大提高效率. ReSharper是一款由jetbrain开发的针对C#,VB.NET,ASP. ...

  10. ASP.NET MVC 实现带论坛功能的网站 第一步——-实现用户注册.

    首先我们要实现用户的注册功能.进入visual studio 点击文件->新建->项目->选择ASP.NET Web应用程序(.NET Framework)->选择的模板为MV ...