用户信息填写案例分析,利用动态 去渲染静态页面结构 生成新的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="css/user.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>
<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>1</td>
<td>这是名称</td>
<td>这是年龄</td>
<td>这是性别</td>
<td>这是工资</td>
<td>这是所在城市</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr> -->
</tbody>
</table>
<script>
// 获取元素
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')
// 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: '北京'
}
]
// 获取静态数据 渲染成动态结构
function init() {
let htmlStr = ''
// 由于对象是个伪数组 需要遍历 生成动态结构
for (let i = 0; i < arr.length; i++) {
htmlStr += `
<tr>
<td>${i + 1}</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="javascript:" class="del" id = '${arr[i].stuId}'>删除</a>
</td>
</tr>
`
}
tbody.innerHTML = htmlStr //渲染的页面不能写在循环里面 否则渲染完后还会渲染多一遍出来
}
init()
//增加新数据到数组里 由于数据类型较多,需要用对象的形式存储 绑定登入事件 追加数据
add.addEventListener('click', function () {
// 改变表单输入的数据内容 由用户决定输入什么就是什么内容
let obj = {
// 获取最后一个数据对象的stuId + 1,如果没有数据，id直接赋值为1001
stuId: arr.length > 0 ? arr[arr.length - 1].stuId + 1 : 1001,
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value
}
// console.log(arr.length + 1);
arr.push(obj)
init()
})
// 删除数据 需要判断当用户是点击删除才会删除数据 绑定父元素做事件委托 ，让子元素来触发
tbody.addEventListener('click', function (e) {
//e.target是什么？当前用户单击的元素
if (e.target.className == "del") {
// 让自己存储一个变量赋值回给自己
let id = e.target.id
// 判断用户点击当前删除哪个 用id做匹配对应当前删除的内容
for (let i = 0; i < arr.length; i++) {
if (id == arr[i].stuId) {
arr.splice(i, 1)
}
}
init()
}
})
</script>
</body>
</html>
案例分析总结:
实现数据渲染: 数据+静态结构 = 遍历数据 + 拼接结构 +修改数据内容渲染到页面 + 填充到指定位置
1.先获取模拟数据
2.动态渲染静态的页面结构,用函数封装方便后期调用
3.增加数据,动态渲染新的数据,调用函数渲染到指定的页面结构
4.删除数据.绑定父容器做事件委托,让子元素冒泡处理,减少事件的注册
注意:动态的渲染的元素(也就是指未来需要创建的元素)的事件注册使用委托 ,只能使用委托
