今天给大家带来如何使用js来实现学生信息管理的事件案例
首先是简单的HTML部分，就是一个简单的表格设置，至于autocomplete是什么意思，在这里解释一下，这个如果AutoComplete控件就是指用户在文本框输入前几个字母或是汉字的时候，该控件就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户，供用户选择，提供方便。
<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>接下来是CSS
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color:#721c24;
}
h1 {
text-align: center;
color:#333;
margin: 20px 0;
}
table {
margin:0 auto;
width: 800px;
border-collapse: collapse;
color:#004085;
}
th {
padding: 10px;
background: #cfe5ff;
font-size: 20px;
font-weight: 400;
}
td,th {
border:1px solid #b8daff;
}
td {
padding:10px;
color:#666;
text-align: center;
font-size: 16px;
}
tbody tr {
background: #fff;
}
tbody tr:hover {
background: #e1ecf8;
}
.info {
width: 900px;
margin: 50px auto;
text-align: center;
}
.info input, .info select {
width: 80px;
height: 27px;
outline: none;
border-radius: 5px;
border:1px solid #b8daff;
padding-left: 5px;
box-sizing: border-box;
margin-right: 15px;
}
.info button {
width: 60px;
height: 27px;
background-color: #004085;
outline: none;
border: 0;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
.info .age {
width: 50px;
}再然后就是JS
<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.录入模块
//1.1表单提交事件
const info=document.querySelector('.info')
info.addEventListener('submit',function(e){
//阻止默认行为
e.preventDefault()
//创建新的的对象
//这里进行表单判断，不通过，中断，不需要添加数据
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
}
//追加给数组里面
arr.push(obj)
// console.log(arr)
//重置
this.reset()
//调用
render()
})
//2.渲染函数 因为增加和删除都需要渲染
function render(){
//先情况tbody 把最新数组渲染完毕
tbody.innerHTML=''
//遍历素组
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>
`
//追加元素
// 父元素.appendChild
tbody.appendChild(tr)
}
}
//3.删除操作
//3.1事件委托tbody
tbody.addEventListener('click', function(e){
if(e.target.tagName === 'A'){
//得到当前元素自定义属性
//删除arr数组的数据
arr.splice(e.target.dataset.id,1)
//从新渲染一次
render()
}
})
</script>接下来是源码
<!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.录入模块
//1.1表单提交事件
const info=document.querySelector('.info')
info.addEventListener('submit',function(e){
//阻止默认行为
e.preventDefault()
//创建新的的对象
//这里进行表单判断，不通过，中断，不需要添加数据
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
}
//追加给数组里面
arr.push(obj)
// console.log(arr)
//重置
this.reset()
//调用
render()
})
//2.渲染函数 因为增加和删除都需要渲染
function render(){
//先情况tbody 把最新数组渲染完毕
tbody.innerHTML=''
//遍历素组
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>
`
//追加元素
// 父元素.appendChild
tbody.appendChild(tr)
}
}
//3.删除操作
//3.1事件委托tbody
tbody.addEventListener('click', function(e){
if(e.target.tagName === 'A'){
//得到当前元素自定义属性
//删除arr数组的数据
arr.splice(e.target.dataset.id,1)
//从新渲染一次
render()
}
})
</script>
</body<>
</html>创作不易，多多支持，谢谢大家
