<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../H5/style.css">
</head>
<body>
<h1>新增学员</h1>
<div class="info">
姓名：<input type="text" class="uname"> 年龄：
<input type="text" class="age"> 性别:
<select name="gender" id="" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select> 薪资：
<input type="text" class="salary"> 就业城市：
<select name="city" id="" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
<button class="add">录入</button>
</div>
<h1>就业榜</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1001</td>
<td>刘备</td>
<td>19</td>
<td>男</td>
<td>15000</td>
<td>上海</td>
<td>
<a href=" ">删除</a >
</td>
</tr> -->
</tbody>
</table>
<script>
// 1. 准备阶段 利用 数组 模拟 数据
let arr = [{
stuId: 1001,
uname: '刘备',
age: 19,
gender: '男',
salary: '20000',
city: '上海'
}, {
stuId: 1002,
uname: '关羽',
age: 29,
gender: '男',
salary: '30000',
city: '北京'
}, {
stuId: 1003,
uname: '张飞',
age: 39,
gender: '男',
salary: '2000',
city: '北京'
}];
//2.获取tbody元素
let tbody=document.querySelector('tbody');
//封装一个自定义函数 实现页面的渲染效果
let add=document.querySelector('.add');
let uname=document.querySelector('.uname');
let age=document.querySelector('.age');
let gender=document.querySelector('.gender');
let salary=document.querySelector('.salary');
let city=document.querySelector('.city');
// 3. 封装一个自定义函数 实现页面的渲染效果
function render() {
tbody.innerHTML=''
// 3.1 借助 for 循环 遍历数组 arr
for (var i = 0; i < arr.length; i++) {
// 3.2 创建 tr 元素
var tr = document.createElement('tr');
// 3.3 向 tr 中写入 内容 Esc 下面的 符号 ``
tr.innerHTML = `
<td>${arr[i].stuId}</td>
<td>${arr[i].uname}</td>
<td>${arr[i].age}</td>
<td>${arr[i].gender}</td>
<td>${arr[i].salary}</td>
<td>${arr[i].city}</td>
<td>
<a href=" "id="${i}">删除</a >
</td>
`;
// 3.4 把 tr 追加到 tbody 里面 父元素.appendChild(子元素)
tbody.appendChild(tr);
}
}
render();
//注册点击事件
add.addEventListener('click',function(){
//alert('测试');
//获得表单中的内容 添加到arr push方法
//arr.push('测试');
//console.log(arr);
arr.push({
stuId:arr[arr.length-1].stuId+1,
uname:uname.value,
age:age.value,
gender:gender.value,
salary:salary.value,
city:city.value
});
//console.log(arr);
//重复渲染页面
render();
//复原原始表单 置为默认内容
uname.value=age.value=salary.value='';
gender.value='男';
city.value='北京';
});
//删除数组中的数据 需要用到事件委托 事件对象e
tbody.addEventListener('click',function(e){
//功能：只要点击了链接 就会执行删除操作
//alert('测试！')；
//console。log(e.target.tagName);//A
if(e.target.tagName==='A'){
//alert('点击了删除链接！');
//删除操作 arr.splice(从哪删除，删除几个)
//console.log(a.target.id);
//arr.splice()
arr.splice(e.target.id,1);
//再次渲染页面
render();
}
})
</script>
</body>
</html>
扫一扫
1336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
