采用面向对象实现删除功能:
思路:建立一个对象,存储数据。类似于 数据库 的概念。然后建立一个模板,用来对对象进行遍历实现内容的初始化。接着设置点击动作,采用事件委托机制来优化性能并在DOM结构改变时也能绑定事件。
思路:建立一个对象,存储数据。类似于 数据库 的概念。然后建立一个模板,用来对对象进行遍历实现内容的初始化。接着设置点击动作,采用事件委托机制来优化性能并在DOM结构改变时也能绑定事件。
注意:没有理解其中的Contact是什么意思。后期会更新一个面向对象的版本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>Title</title>
<style>
*{padding:0;margin:0;}
.head,li div{display: inline-block;text-align: center;}
li{margin-top:10px;}
li .id,li .sex,.id,.sex{width:30px;}
li .name,.name{width:40px;}
li .tel,.tel{width:120px;}
li .del,.del{width:15px;}
ul{list-style: none;}
.user-delete{cursor: pointer;}
</style>
</head>
<body>
<div id="J_container">
<div class="record_head">
<div class="head id">序号</div>
<div class="head name">姓名</div>
<div class="head sex">性别</div>
<div class="head tel">电话</div>
<div class="head province">省份</div>
<div class="head">操作</div>
</div>
<ul id="J_List"></ul>
</div>
<script>
// 此处也可换成ES6的写法
function Contact(){
this.init();
}
window.onload = function () {
var oUl = document.getElementById('J_List');
//将对象写入数组中
var objectArr = [
{id:1,name:'张三',sex:'男',tel:'13788888888',province:'浙江'},
{id:2,name:'李四',sex:'女',tel:'13788887777',province:'四川'},
{id:3,name:'王二',sex:'男',tel:'13788889999',province:'广东'}
];
//建立模板
var template = function (objectArr) {
//根据对象中的信息生成li信息列表;
for (var i = 0; i < objectArr.length; i++) {
var oLi = document.createElement('li');
var id = document.createElement('div');
id.className = 'id';
id.innerHTML = objectArr[i].id;
oLi.appendChild(id);
var Name = document.createElement('div');
Name.className = 'name';
Name.innerHTML = objectArr[i].name;
oLi.appendChild(Name);
var sex = document.createElement('div');
sex.className = 'sex';
sex.innerHTML = objectArr[i].sex;
oLi.appendChild(sex);
var tel = document.createElement('div');
tel.className = 'tel';
tel.innerHTML = objectArr[i].tel;
oLi.appendChild(tel);
var province = document.createElement('div');
province.className = 'province';
province.innerHTML = objectArr[i].province;
oLi.appendChild(province);
var userDelete = document.createElement('div');
userDelete.className = 'user-delete';
userDelete.innerHTML = '删除';
oLi.appendChild(userDelete);
oUl.appendChild(oLi); //放入到UL中
}
};
template(objectArr);//初始化内容
//为了减少DOM操作,采用事件委托机制,设置点击动作,点击时改变对象,更新模板。
oUl.onclick = function (event) {
var ev = event||window.event;
var target = ev.target||ev.srcElement;
if(target.nodeName.toLowerCase() == 'div'){
oUl.innerHTML = ''; //每次点击删除动作都清空一下,避免重复产生列表
objectArr.splice(this.index, 1); //删除对应数组中的对象
template(objectArr); //重新渲染模板
}
};
}
</script>
</body>
</html>