增删改查+js练习+es6字符串模板@haloBabyBear
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>todos</title> 6 ????<style> 7 ????????*{ 8 ????????????margin:0; 9 ????????????padding:0;10 ????????}11 12 13 ????????#content{14 ????????????position:absolute;15 ????????????top:50%;16 ????????????left:50%;17 ????????????transform:translate(-200px,-200px);18 ????????}19 20 ????????#input{21 ????????????width:395px;22 ????????????height: 30px;23 ????????????margin-bottom:10px;24 ????????}25 ????????#infoBox{26 ????????????width:400px;27 ????????????height:300px;28 ????????????border:1px solid #000;29 ????????}30 ????????ul{31 ????????????list-style-type: none;32 ????????}33 ????????.hide{34 ????????????display: none;35 ????????}36 ????</style>37 </head>38 <body>39 <div id="content">40 ????<input type="text" id="input"/>41 ????<ul id="infoBox">42 ????</ul>43 </div>44 <script src="todos.js"></script>45 </body>46 </html> ?1 /** ?2 ?* ??3 ?*/ ?4 var data = [{"name":"item1","id":11},{"name":"item2","id":22}]; ?5 var input = document.getElementById("input"); ?6 var info =document.getElementById("infoBox"); ?7 //li对象 ?8 var lis = document.getElementsByTagName(‘li‘); ?9 var txtName = document.getElementsByClassName("txtName"); 10 var editInput = document.getElementsByClassName("editInput"); 11 ?12 //初始化数据，及添加时调用 13 function init(data){ 14 ????var fragment = document.createDocumentFragment(); 15 ?16 ????data.forEach(function aa(item){ 17 ????????var li = document.createElement("li"); 18 ????????li.innerHTML = `<span class="txtName" ?data-id="${item.id}" ?data-name="${item.name}" ondblclick="edit(${item.id})">${item.name}</span> 19 ????????????????????????<input class="editInput hide" type="text" value="${item.name}" onblur="editFinished(${item.id})"/> 20 ????????????????????????<span data-id="${item.id}" style=‘float:right;cursor: pointer‘ onclick=‘remove(${item.id})‘>X</span>`; 21 ????????// li.setAttribute("data-id",item.id); 22 ????????li.style ="margin-top:10px"; 23 ????????fragment.appendChild(li); 24 ????}); 25 ?26 ????info.appendChild(fragment); 27 } 28 //页面加载好加载数据 29 window.onload = init(data); 30 ?31 ???function remove(id){ 32 ???????for(var i=0;i<lis.length;i++){ 33 ???????????if(lis[i] != null){ 34 ???????????????//删除元素 元素.parentNode.removeChild(元素); 35 ???????????????if (lis[i].childNodes[4].dataset.id == id +"") 36 ???????????????????lis[i].parentNode.removeChild( lis[i]); 37 ???????????} 38 ???????} 39 ???} 40 ?41 ???function add(){ 42 ???????var idNum = ?Math.floor(100*Math.random()); 43 ???????//设置新的数组，数组长度一直为1 44 ???????var newElement = [];//清空 45 ???????newElement.push({"name":input.value,id:idNum}); 46 ???????data.push({"name":input.value,id:idNum});//infoBox中渲染的数据中添加新数据 47 ???????init(newElement);//添加新数据 48 ???????console.log(data); 49 ???????return data;//返回所有数据 50 ???} 51 ?52 //编辑 53 function edit(id){ 54 ????for(var i=0;i<txtName.length;i++){ 55 ????????????if(txtName[i].dataset.id == id + ""){ 56 ????????????????txtName[i].className = "txtName hide"; 57 ????????????????editInput[i].className = "editInput"; 58 ????????????} 59 ?60 ????} 61 } 62 ?63 //编辑成功 64 function editFinished(id){ 65 ????for(var i=0;i<txtName.length;i++){ 66 ????????if(txtName[i].dataset.id == id + ""){ 67 ????????????var temp = txtName[i].dataset.name; 68 ????????????if (editInput[i].value === ‘‘){ 69 ????????????????txtName[i].className = "txtName"; 70 ????????????????editInput[i].className = "editInput hide"; 71 ????????????????txtName[i].innerHTML = temp; 72 ????????????????alert("为空时不改变"); 73 ????????????} 74 ????????????else{ 75 ????????????????txtName[i].className = "txtName"; 76 ????????????????editInput[i].className = "editInput hide"; 77 ????????????????txtName[i].innerHTML = editInput[i].value; 78 ????????????????alert("编辑成功"); 79 ????????????} 80 ????????} 81 ????} 82 } 83 ?84 input.addEventListener(‘keydown‘, function(ev) { 85 ????//按键为回车键时执行 86 ????if (ev.keyCode === 13) { 87 ????????//输入为空时不执行添加操作 88 ????if (input.value === ‘‘) return; 89 ????//添加数据 90 ????add(); 91 ????//清空数据 92 ????input.value = ‘‘; 93 ????} 94 ????else { 95 ????//延时搜索 96 ????setTimeout(function() { 97 ????????search(input.value); 98 ????}, 10) 99 ????}100 });101 102 function search($str){103 ????for(var i=0;i<txtName.length;i++){104 ????????//ig全局匹配，不区分大小写105 ?????????var reg = new RegExp("(" + $str + ")", "ig");106 ?????????var temp = txtName[i].dataset.name;107 ?????????//$1指原始字符串108 ????????//高亮要查找的字符串109 ?????????temp = temp.replace(reg,"<span style=‘color:red‘>$1</span>");110 ?????????txtName[i].innerHTML = temp;111 ????}112 }todos+增删改查+js练习
原文地址：https://www.cnblogs.com/bxlbear/p/9603534.html