渲染学生信息案例

最新推荐文章于 2024-10-30 18:24:25 发布

zrzzzzzzzzzzzz

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量50

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/zrzzzzzzzzzzzz/article/details/124867713

版权

本文介绍了如何在HTML、CSS和JavaScript的基础上创建一个用于录入新学员信息并显示就业榜的简单网页。包括姓名、年龄、性别选择、薪资输入以及城市选项，同时展示了如何使用JavaScript处理表单数据和动态渲染列表。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/style.css" rel="stylesheet">
</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" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
<button class="add">录入</button>
</div>

</tbody>
</table>
<script>
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: '北京'
}];
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');
function render(){
for(let i=0;i<arr.length;i++)
{
let 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:" id="${i}">删除</a>
</td>`;
tbody.appendChild(tr);
}
}
render();
add.addEventListener('click',function(){
arr.push({
stuId:arr.length==0?1001:arr[(arr.length)-1].stuId+1,
uname:uname.value,
age:age.value,
gender:gender.value,
salary:salary.value,
city:city.value
});
tbody.innerHTML='';
render();
uname.value=age.value=salary.value='';
gender.value='男';
city.value='北京';
});
tbody.addEventListener('click',function(e){
if(e.target.tagName==='A'){
arr.splice(e.target.id,1);
tbody.innerHTML='';
render();
}
});
</script>
</body>
</html>