增删改查+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练习的更多相关文章

  1. 增删改查js

    -----------------------------------------------------一---------------------------------------------- ...

  2. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  3. easyui datagrid 增删改查示例

    查询JSP页面 <!doctype html> <%@include file="/internet/common.jsp"%> <!-- 新样式右侧 ...

  4. BootstrapTable+KnockoutJS实现增删改查解决方案

    BootstrapTable+KnockoutJS实现增删改查解决方案 前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一 ...

  5. Node.js + MySQL 实现数据的增删改查

    通过完成一个 todo 应用展示 Node.js + MySQL 增删改查的功能.这里后台使用 Koa 及其相应的一些中间件作为 server 提供服务. 初始化项目 $ mkdir node-cru ...

  6. JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）

    前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...

  7. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（一）

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  8. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...

  9. Node.js、express、mongodb 入门(基于easyui datagrid增删改查)

    前言 从在本机(win8.1)环境安装相关环境到做完这个demo大概不到两周时间,刚开始只是在本机安装环境并没有敲个Demo,从周末开始断断续续的想写一个,按照惯性思维就写一个增删改查吧,一方面是体验 ...

随机推荐

  1. jquery添加节点时能有点击事件

    <script>            var n=0;            $(".dj").on('click',function(){              ...

  2. Apex辅助 - 透视|自瞄|无后

    Apex辅助 - 透视|自瞄|无后 裙:㈥㈠肆㈥②ээ㈠5免费使用供大家参考裙:㈥㈠肆㈥②ээ㈠5免费使用供大家参考裙:㈥㈠肆㈥②ээ㈠5免费使用供大家参考裙:㈥㈠肆㈥②ээ㈠5免费使用供大家参考裙: ...

  3. 第十七周翻译-SQL Server中事务日志管理的阶梯，级别5：以完全恢复模式管理日志

    SQL Server中事务日志管理的阶梯,级别5:以完全恢复模式管理日志 作者:Tony Davis,2012/01/27 翻译:赖慧芳 译文: 该系列   本文是Stairway系列的一部分:SQL ...

  4. 移动端click事件无反应或反应慢 touchend事件页面滑动时频繁触发

    H5页面的点击事件click 无论在浏览器 iframe还是小程序里面 都会出现点击无反应或者反应慢的情况出现 所以决定用touchend事件来代替click 但是touchend事件触发比较灵敏 在 ...

  5. L347

    Even Educators Believe These 7 Myths About Learning1. Individuals learn better when they receive inf ...

  6. 第二次靶场练习：cookie注入

    cookie注入 本文章目的是对相关的黑客内容进一步了解,如有人违反相关的法律法规,本人概不负责 一.学习目的: 利用手工注入网站 利用sqlmab注入 二.附件说明 靶场网址:http://120. ...

  7. vue2.0 添加监听滚动事件

    export default { data () { return { isFixed: true } }, mounted () { window.addEventListener('scroll' ...

  8. linux 入门学习

    一.命令 1.命令提示符 [root@localhost ~]# [] :提示符的分隔符,无特殊含义: root:当前的登录用户: @:分隔符,无特殊含义: localhost:当前主机名(完整名称: ...

  9. Tmux会话-基本操作及原理

    一.Tmux命令介绍: Tmux (“Terminal Multiplexer”的简称), 是一款优秀的终端复用软件,类似 GNU screen,但比screen更出色. tmux来自于OpenBSD ...

  10. day14 生成器迭代器

    迭代器(iterator) 可迭代对象: 可以使用迭代器取出数据的对象 判断一个对象是否是可迭代对象,就看这个对象有没有实现__iter__方法 所有的容器类型(包括字符串)都是可迭代的 迭代器的使用 ...