前端的CRUD增删改查的小例子
前端的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增删改查的小例子的更多相关文章
- 使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序
使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序 不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻 ...
- yii2-basic后台管理功能开发之二:创建CRUD增删改查
昨天实现了后台模板的嵌套,今天我们可以试着创建CRUD模型啦 刚开始的应该都是“套用”,不再打算细说,只把关键的地方指出来. CRUD即数据库增删改查操作.可以理解为yii2为我们做了一个组件,来实现 ...
- 创建支持CRUD(增删改查)操作的Web API(二)
一:准备工作 你可以直接下载源码查看 Download the completed project. 下载完整的项目 CRUD是指“创建(C).读取(R).更新(U)和删除(D)”,它们是四个 ...
- 【EF6学习笔记】(二)操练 CRUD 增删改查
本篇原文链接: Implementing Basic CRUD Functionality 说明:学习笔记参考原文中的流程,为了增加实际操作性,并能够深入理解,部分地方根据实际情况做了一些调整:并且根 ...
- EF6 学习笔记(二):操练 CRUD 增删改查
EF6学习笔记总目录 ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 接上篇: EF6 学习笔记(一):Code First 方式生成数据库及初始化数据库实际操作 本篇原文链接: I ...
- 一起学Vue:CRUD(增删改查)
目标 使用Vue构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式. 效果页面 比如我们要实现这样列表.新增.编辑三个页面: 列表页面 新增页面 编辑页面 我们把这些用户信息保存到Todo ...
- MybatisPlus核心功能——实现CRUD增删改查操作 (包含条件构造器)
CRUD 官方文档:https://baomidou.com/ (建议多看看官方文档,每种功能里面都有讲解)[本文章使用的mybatisplus版本为3.5.2] 条件构造器 一般都是用service ...
- Mybatis的CRUD 增删改查
目录 namespace 命名空间 select insert update delete Mybatis 官网: https://mybatis.org/mybatis-3/zh/getting-s ...
- 动态网站项目(Dynamic Web Project)CRUD(增删改查)功能的实现(mvc(五层架构)+jdbc+servlet+tomcat7.0+jdk1.8),前端使用JSP+JSTL+EL组合
代码分享链接 https://pan.baidu.com/s/1UM0grvpttHW9idisiqa6rA 提取码:hx7c 图示 项目结构 1.SelectAllUser ...
随机推荐
- 一文读懂:超详细正态分布方差等于o的推导
(uv)' = [(u+△u)(v+△v) - uv] /△x = (v△u+u△v +△u△v)/△x = v(△u/△x) + u(△v/△x) +(△u△v)/△x =u'v+uv'
- UVa 210 Concurrency Simulator (双端队列+模拟)
题意:给定n个程序,每种程序有五种操作,分别为 var = constant(赋值),print var (打印), lock, unlock,end. 变量用小写字母表示,初始化为0,为程序所公有( ...
- python logging 实现的进程安全的文件回滚日志类
python标准库中的logging模块在记录日志时经常会用到,但在实际使用发现它自带的用于本地日志回滚的类 logging.handlers.RotatingFileHandler 在多进程环境下会 ...
- HDU1551&&HDU1064 Cable master 2017-05-11 17:50 38人阅读 评论(0) 收藏
Cable master Time Limit: ...
- HDU1254 推箱子(BFS) 2016-07-24 14:24 86人阅读 评论(0) 收藏
推箱子 Problem Description 推箱子是一个很经典的游戏.今天我们来玩一个简单版本.在一个M*N的房间里有一个箱子和一个搬运工,搬运工的工作就是把箱子推到指定的位置,注意,搬运工只能推 ...
- 【lazy标记得思想】HDU3635 详细学习并查集
部分内容摘自以下大佬的博客,感谢他们! http://blog.csdn.net/dm_vincent/article/details/7769159 http://blog.csdn.net/dm_ ...
- Java IO流详尽解析(转)
流的概念和作用 学习Java IO,不得不提到的就是JavaIO流. 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输 ...
- 图书助手Alpha版使用说明
一.产品介绍 我们做的是一个基于安卓的手机app,通过连接图书馆的数据库,实现查询图书馆的书目信息的功能. 二.软件运行 我们只做了安卓版本,需要在安卓环境下运行. 三.软件结构 本软件主要包括客户端 ...
- delphi存取图片
1.存图片到数据库 var PicStream: TMemoryStream; if imgBugPic.Picture.Graphic <> nil then begin P ...
- Linq to Object 的简单使用示例
语言集成查询 (LINQ) 是 Visual Studio 2008 中引入的一组功能,可为 C# 和 Visual Basic 语言语法提供强大的查询功能. LINQ 引入了标准易学的数据查询和更新 ...