动态创建/删除表格内容

248 阅读 0 评论 164 点赞

我是靠谱客的博主调皮帅哥，这篇文章主要介绍动态创建/删除表格内容，现在分享给大家，希望可以做个参考。

表格内需初始有内容

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="stu.css">
</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" id="" 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>

</tr>
</tbody>
</table>
<script>
// 1. 利用数组模拟数据
let arr = [{
// key: value
stuId: 1001,
uname: '小一',
age: 19,
gender: '男',
salary: '20000',
city: '上海'
}];
// 2. 获取元素对象
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');
// 3. 通过自定义函数 实现 渲染页面 效果
function render() {
// 函数功能: 根据数组元素的个数(数据的条数)来渲染页面(向tbody里面追加tr行)
// 先清空 tbody 中的数据
tbody.innerHTML = '';
for (let i = 0; i < arr.length; i++) {
// 3.1 先创建 tr 元素
let tr = document.createElement('tr');
// 3.2 向 tr 中写入数据
// 直接按键盘 1 左侧的按键 `` 不是单引号 ''
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>
`;
// 3.3 再向 tbody 中 追加 tr
tbody.appendChild(tr);
// 复原表单的原始状态
// uname.value = age.value = salary.value = '';
// gender.value = '男';
// city.value = '北京';
}
}
// 渲染页面: 调用一次函数
render();
// 4. 对 add 录入按钮 添加监听事件
add.addEventListener('click', function() {
// 先获取表单里面的内容
再追加到数组里面 需要用到 push 方法
// console.log(arr.push('111111'));
arr.push({
// 1004 是 如何 获取的?
// stuId: 1001 + 1,
stuId: arr[arr.length - 1].stuId + 1,
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value
});
// 重新渲染页面
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);
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="stu.css">
</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" id="" 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>
<!-- <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>
// 1. 利用数组模拟数据
let arr = [{
// key: value
stuId: 1001,
uname: '小一',
age: 19,
gender: '男',
salary: '20000',
city: '上海'
}];
// 2. 获取元素对象
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');
// 3. 通过自定义函数 实现 渲染页面 效果
function render() {
// 函数功能: 根据数组元素的个数(数据的条数)来渲染页面(向tbody里面追加tr行)
// 先清空 tbody 中的数据
tbody.innerHTML = '';
for (let i = 0; i < arr.length; i++) {
// 3.1 先创建 tr 元素
let tr = document.createElement('tr');
// 3.2 向 tr 中写入数据
// 直接按键盘 1 左侧的按键 `` 不是单引号 ''
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>
`;
// 3.3 再向 tbody 中 追加 tr
tbody.appendChild(tr);
// 复原表单的原始状态
// uname.value = age.value = salary.value = '';
// gender.value = '男';
// city.value = '北京';
}
}
// 渲染页面: 调用一次函数
render();
// 4. 对 add 录入按钮 添加监听事件
add.addEventListener('click', function() {
// 先获取表单里面的内容
再追加到数组里面 需要用到 push 方法
// console.log(arr.push('111111'));
arr.push({
// 1004 是 如何 获取的?
// stuId: 1001 + 1,
stuId: arr[arr.length - 1].stuId + 1,
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value
});
// 重新渲染页面
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);
render();
}
})
</script>
</body>
</html>

下面为上面的CSS样式

复制代码

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
* {
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 {
width: 80px;
height: 25px;
outline: none;
border-radius: 5px;
border:1px solid #b8daff;
padding-left: 5px;
}
.info button {
width: 60px;
height: 25px;
background-color: #004085;
outline: none;
border: 0;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
.info .age {
width: 50px;
}