渲染学生信息案例

最新推荐文章于 2024-06-20 20:20:21 发布

zrzzzzzzzzzzzz

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量42

点赞数

文章标签： javascript html5

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

版权

<!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>

zrzzzzzzzzzzzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
渲染学生信息案例

<!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"&g...
复制链接

扫一扫