代码效果图
码题思路:
一.分析需求
需求一:显示用户在页面提交的数据
需求二:删除一条用户信息
二.所需要运用的相关代码语法
获取事件 const div=document.querySelector('.div')
注册事件 div.addEventListener('事件', function() { ....}
- 条件循环 :
数组遍历for循环
if条件判断
3.注意表单默认行为
阻止表单默认行为 e.preventDefault()
4.节点的增删改查
三.中心思路
用户提交数据需要创建一个空数组(放置对象)来存放用户数据 , 正常获和取注册事件,条件判断用户提交空表的情况 、用户删除数据的提示操作,在条件循环中注意需要考虑代码的重复添加并在合适位置添加重置表单的操作,增加节点并追加给父节点到渲染页面,可以封装渲染函数以此来提高代码复用性.
css部分
<!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>学生信息管理</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<h1>新增学员</h1>
<form class="info" autocomplete="off">
姓名：<input type="text" class="uname" name="uname" /> 年龄：
<input type="text" class="age" name="age" /> 性别:
<select name="gender" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select> 薪资：
<input type="text" class="salary" name="salary" /> 就业城市：
<select name="city" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="曹县">曹县</option>
</select>
<button class="add">录入</button>
</form>
<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="javascript:">删除</a>
</td>
</tr> --
</tbody>
</table>
js部分(重点)
代码片段接上
<script>
//声明一个空数组用来存放用户输入的信息
const arr = []
//1.获取事件
const info = document.querySelector('.info')
//1.2注册事件 提交事件
info.addEventListener('submit', function(e) {
console.log(info)
// 1.3阻止表单默认行为(自动跳转)
e.preventDefault()
//1.4获取对应表单的value值 trim()消除空格
const uname = document.querySelector('.uname').value.trim()
const age = document.querySelector('.age').value.trim()
const gender = document.querySelector('.gender').value
const salary = document.querySelector('.salary').value.trim()
const city = document.querySelector('.city').value
//1.5判断用户输入为空则出现提示
if (uname.length === 0 || age.length === 0 || salary.length === 0) {
return alert('请您正确输入')
}
//1.5创建对象 用于保存用户数据
const obj = {
id: arr.length + 1,
uname,
age,
gender,
salary,
city
}
console.log(obj)
//1.6放到空数组里
arr.push(obj)
// console.log(obj)
//2.5调用下面函数 并重置表单
this.reset()
render()
})
//二.封装渲染函数
const tbody = document.querySelector('tbody')
function render() {
// 2.1遍历数组拿东西
//2.6 把tbody里内容清除
tbody.innerHTML = ''
for (let i = 0; i < arr.length; i++) {
//2.2 创建tr标签
const tr = document.createElement('tr')
//2.3 在tr里写入对应的td标签 渲染
tr.innerHTML = `
<td>${arr[i].id}</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:" 'data-id=${i}'>删除</a>
</td>
`
//2.4在tbody标签里追加元素 tr
tbody.appendChild(tr)
}
}
//三.删除操作 采用事件委托
// 3.1注册事件 点击事件
tbody.addEventListener('click', function(e) {
console.log(e.target.tagName)
if (e.target.tagName === 'A') {
console.log(e.target.dataset.id)
if (confirm('are you sure?')) {
const id = e.target.dataset.id
arr.splice(id, 1)
render()
}
}
})
</script>
</body>
</html>
代码实现效果图
添加数据
删除数据
