渲染学生信息案例

139 阅读 0 评论 92 点赞

我是靠谱客的博主超帅黄蜂，这篇文章主要介绍渲染学生信息案例，现在分享给大家，希望可以做个参考。

复制代码

<!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>
<h1>就业榜</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!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>
<h1>就业榜</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</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>