todos+增删改查+js练习
增删改查+js练习+es6字符串模板@haloBabyBear
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todos</title>
<style>
*{
margin:0;
padding:0;
} #content{
position:absolute;
top:50%;
left:50%;
transform:translate(-200px,-200px);
} #input{
width:395px;
height: 30px;
margin-bottom:10px;
}
#infoBox{
width:400px;
height:300px;
border:1px solid #000;
}
ul{
list-style-type: none;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div id="content">
<input type="text" id="input"/>
<ul id="infoBox">
</ul>
</div>
<script src="todos.js"></script>
</body>
</html>
/**
*
*/
var data = [{"name":"item1","id":11},{"name":"item2","id":22}];
var input = document.getElementById("input");
var info =document.getElementById("infoBox");
//li对象
var lis = document.getElementsByTagName('li');
var txtName = document.getElementsByClassName("txtName");
var editInput = document.getElementsByClassName("editInput"); //初始化数据，及添加时调用
function init(data){
var fragment = document.createDocumentFragment(); data.forEach(function aa(item){
var li = document.createElement("li");
li.innerHTML = `<span class="txtName" data-id="${item.id}" data-name="${item.name}" ondblclick="edit(${item.id})">${item.name}</span>
<input class="editInput hide" type="text" value="${item.name}" onblur="editFinished(${item.id})"/>
<span data-id="${item.id}" style='float:right;cursor: pointer' onclick='remove(${item.id})'>X</span>`;
// li.setAttribute("data-id",item.id);
li.style ="margin-top:10px";
fragment.appendChild(li);
}); info.appendChild(fragment);
}
//页面加载好加载数据
window.onload = init(data); function remove(id){
for(var i=0;i<lis.length;i++){
if(lis[i] != null){
//删除元素 元素.parentNode.removeChild(元素);
if (lis[i].childNodes[4].dataset.id == id +"")
lis[i].parentNode.removeChild( lis[i]);
}
}
} function add(){
var idNum = Math.floor(100*Math.random());
//设置新的数组，数组长度一直为1
var newElement = [];//清空
newElement.push({"name":input.value,id:idNum});
data.push({"name":input.value,id:idNum});//infoBox中渲染的数据中添加新数据
init(newElement);//添加新数据
console.log(data);
return data;//返回所有数据
} //编辑
function edit(id){
for(var i=0;i<txtName.length;i++){
if(txtName[i].dataset.id == id + ""){
txtName[i].className = "txtName hide";
editInput[i].className = "editInput";
} }
} //编辑成功
function editFinished(id){
for(var i=0;i<txtName.length;i++){
if(txtName[i].dataset.id == id + ""){
var temp = txtName[i].dataset.name;
if (editInput[i].value === ''){
txtName[i].className = "txtName";
editInput[i].className = "editInput hide";
txtName[i].innerHTML = temp;
alert("为空时不改变");
}
else{
txtName[i].className = "txtName";
editInput[i].className = "editInput hide";
txtName[i].innerHTML = editInput[i].value;
alert("编辑成功");
}
}
}
} input.addEventListener('keydown', function(ev) {
//按键为回车键时执行
if (ev.keyCode === 13) {
//输入为空时不执行添加操作
if (input.value === '') return;
//添加数据
add();
//清空数据
input.value = '';
}
else {
//延时搜索
setTimeout(function() {
search(input.value);
}, 10)
}
}); function search($str){
for(var i=0;i<txtName.length;i++){
//ig全局匹配，不区分大小写
var reg = new RegExp("(" + $str + ")", "ig");
var temp = txtName[i].dataset.name;
//$1指原始字符串
//高亮要查找的字符串
temp = temp.replace(reg,"<span style='color:red'>$1</span>");
txtName[i].innerHTML = temp;
}
}
todos+增删改查+js练习的更多相关文章
- 增删改查js
-----------------------------------------------------一---------------------------------------------- ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面
前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...
- easyui datagrid 增删改查示例
查询JSP页面 <!doctype html> <%@include file="/internet/common.jsp"%> <!-- 新样式右侧 ...
- BootstrapTable+KnockoutJS实现增删改查解决方案
BootstrapTable+KnockoutJS实现增删改查解决方案 前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一 ...
- Node.js + MySQL 实现数据的增删改查
通过完成一个 todo 应用展示 Node.js + MySQL 增删改查的功能.这里后台使用 Koa 及其相应的一些中间件作为 server 提供服务. 初始化项目 $ mkdir node-cru ...
- JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）
前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（一）
前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查
前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...
- Node.js、express、mongodb 入门(基于easyui datagrid增删改查)
前言 从在本机(win8.1)环境安装相关环境到做完这个demo大概不到两周时间,刚开始只是在本机安装环境并没有敲个Demo,从周末开始断断续续的想写一个,按照惯性思维就写一个增删改查吧,一方面是体验 ...
随机推荐
- COPD——团队项目测试心得
写在前面: 测试结束了,也要和项目说拜拜了~这一学期时间飞快,痛并快乐着,想想人生如果是个软件,那我们用多长时间在做测试呢?恐怕是一辈子.很多人忙着追逐,却很少人能停下来审视自己,那些时常自省的,常能 ...
- Spring 基础知识（三）MVC 架构简介
参考博文: http://blog.csdn.net/liangzi_lucky/article/details/52459378 Spring mvc 执行顺序: 过滤器 web.xml 拦截器 ...
- Problem A: 重载字符的加减法
Description 定义一个字符类Character,只有一个char类型的数据成员. 重载它的+.-.<<和>>运算符,其中+.-的第二个操作数是int类型的整数n.“+ ...
- 远程桌面服务当前正忙,因此无法完成您尝试执行的任务-win2008R2
远程桌面服务当前正忙,因此无法完成您尝试执行的任务,近来我服务器出现这情况, 到达主机房看主机...不可以登陆,也没有登陆框.只能关机. 在微软找到的原因是:Csrss.exe 进程和某些应用程序 ( ...
- eclipse安装反编译插件(附jad下载）
eclipse安装反编译插件(附jad下载) 博客分类: eclipse 一.eclipse反编译插件Jadclipse jadclips插件网站: http://jadclipse.sou ...
- python 实现程序重启
def restart_program(): """Restarts the current program. Note: this function does not ...
- Docker入门教程
一.入门介绍 Docker是一个开源引擎,类似于一个集装箱,开发者通过它可以为任何应用创建一个轻量级.环境无关可移植的容器.开发者在本地编译测试过的容器可以在不同的环境中部署. 通常适用于如下场景: ...
- L2-007 家庭房产 （25 分)
L2-007 家庭房产 (25 分) 给定每个人的家庭成员和其自己名下的房产,请你统计出每个家庭的人口数.人均房产面积及房产套数. 输入格式: 输入第一行给出一个正整数N(≤),随后N行,每行按下 ...
- NodeJS静态文件访问性能测试
受益于JavaScript语言优秀特点,使NodeJS开发服务端应用很方便,配合NPM官方提供的大量第三方组件,让NodeJS更加如虎添翼.最近,需要使用NodeJS做一个服务端HTML5的游戏服务器 ...
- Delphi7 在Windows 7上无法打开Help选项下帮助文档
发现无法打开Delphi7的帮助文档,百度了一下,问题已经解决. Delphi的帮助文档是*.hlp格式的,而Windows7已经不再带有WinHlp32程序,所以无法再打开此类格式. 此时你需要下载 ...