增删改查+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;
}
}
