示例代码
<!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>
<script>
//获取元素
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const gender = document.querySelector('.gender')
const salary = document.querySelector('.salary')
const city = document.querySelector('.city')
const tbody = document.querySelector('tbody')
// 获取所有带name属性的元素
const items = document.querySelectorAll('[name]')
//建立一个空数组,增加和删除都是针对此数组进行
const arr = []
//1.录入模块
// 表单提交事件
const info = document.querySelector('.info')
info.addEventListener('submit', function (e) {
//阻止默认跳转页面行为
e.preventDefault()
// console.log(11)
//进行表单验证,如果不通过就直接中断
for (let i = 0; i < items.length; i++) {
if (items[i].value === '') {
return alert('输入内容不能为空')
}
}
//创建新的对象
const obj = {
stuID: arr.length + 1,
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value
}
// console.log(obj);
//追加到数组里面
arr.push(obj)
// console.log(arr);
//清空表单
this.reset()
//调用渲染函数
render()
})
// 2.封装渲染函数
function render() {
//先清空tbody,把最新数组里面的数据渲染完毕
tbody.innerHTML = ''
//遍历arr数组
for (let i = 0; i < arr.length; i++) {
//生成tr
const tr = document.createElement('tr')
//写入数据
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="javascript:" data-id=${i}>删除</a>
</td>
`
//追加元素
tbody.appendChild(tr)
}
}
// 3.删除操作,用事件委托
tbody.addEventListener('click', function (e) {
if (e.target.tagName === 'A')
//得到当前元素的自定义属性
// console.log(e.target.dataset.id);
//删除arr 数组里面对应的数据
arr.splice(e.target.dataset.id, 1)
//重新渲染
render()
})
</script>
</body>
</html>
一些笔记
this.reset()清空表单,重置按钮
追加元素
父元素.appendChild(子元素)
括号内不加'' 在使用的时候会有重复添加的问题存在,这时需要你在添加之前先清空父元素
有多个按钮执行同一操作时,一个个获取太麻烦,这时通常使用事件委托来做,委托给相对较少的元素
tbody.addEventListener('click', function (e) {
if (e.target.tagName === 'A')
alert(11)
})
无法确定元素序号时,使用自定义属性
删除数据 元素.splice()
对于表单的非空判断,表单都有name属性,采取把所有有name属性的元素获取到一个数组里面,再对数组进行遍历
属性选择器:[属性]
// 获取所有带name属性的元素
const items = document.querySelectorAll('[name]')