您的位置：首页 > Web前端

阿里前端内推笔试题

2017-08-17 16:36 387 查看

利用面向对象思想完成买家信息删除功能，每一条信息包含：

姓名（name）

性别（sex）

电话号码（number）

省份（province）

实现以下要求：

不能借用任何第三方库，需要使用原生代码实现。

结合给出的基本代码结构，在下方2处code here补充代码，完成买家信息的删除功能，注意此页面要在手机上清晰显示。

js代码可以任意调整，例如和使用es6代码完成。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 适配移动端浏览器-->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">
<meta name="format-detection" content="telephone=no">
<title>demo</title>
<style>
/*修改了样式使其展现的更加整洁*/
* { padding: 0; margin: 0;}
.record-head{width:100%}
.head, li div { display: inline-block; width: 20%; text-align: center; }
li .id, li .sex, .id, .sex { width: 10%; }
li .name, .name { width: 10%; }
li .tel, .tel { width: 20%; }
.del,.user-delete { width:10%; }
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 del">操作</div>
</div>
<ul id="J_List">
<li>
<div class="id">1</div>
<div class="name">张三</div>
<div class="sex">男</div>
<div class="tel">13788888888</div>
<div class="province">浙江</div>
<div class="user-delete">删除</div>
</li>
<li>
<div class="id">2</div>
<div class="name">李四</div>
<div class="sex">女</div>
<div class="tel">13788887777</div>
<div class="province">四川</div>
<div class="user-delete">删除</div>
</li>
<li>
<div class="id">3</div>
<div class="name">王二</div>
<div class="sex">男</div>
<div class="tel">13788889999</div>
<div class="province">广东</div>
<div class="user-delete">删除</div>
</li>
</ul>
</div>

<script>
//利用ES6的方式实现

class Concat{
constructor(){
this.init();
}
init(){
var Divs = document.getElementsByClassName("user-delete");
var Ul = document.querySelector("#J_List");
var Lists = Ul.querySelectorAll("li");

for (let i = 0; i < Divs.length; i++) {
Divs[i].onclick =  () => {
Lists[i].remove();
console.log(i);
}
}
}
}
new Concat();

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航