阿里测评题2017

采用面向对象实现删除功能：
思路：建立一个对象，存储数据。类似于数据库的概念。然后建立一个模板，用来对对象进行遍历实现内容的初始化。接着设置点击动作，采用事件委托机制来优化性能并在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>

　　

posted @ 2017-08-18 14:22  哼小调C  阅读(307)  评论(0)    收藏  举报