学生录入系统

效果图

 案例代码

        HTML部分

<div id="app">
			<fieldset id="">
				<legend>学生录入系统</legend>
				<p>
					<span>姓名：</span>
					<input type="text" name="username" class="username" />
				</p>
				<p>
					<span>年龄：</span>
					<input type="text" name="age" class="age" />
				</p>
				<p>
					<span>性别:</span>
					<select name="sex" id="sex">
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
				</p>
				<p>
					<span>手机:</span>
					<input type="text" name="phone" class="phone" />
				</p>
				<p>
					<button id="but">确认提交</button>
				</p>
			</fieldset>
			<!-- 第二部分：信息展示 -->
			<table border="1" width="630px" align="center" style="border-collapse: collapse;margin-top: 20px;">
				<thead bgcolor="#99BF32">
					<tr>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>手机</th>
						<th>删除</th>
					</tr>
				</thead>
				<tbody class="tbody" align="center">
					<!-- <tr>
						<td>张三</td>
						<td>18</td>
						<td>男</td>
						<td>111</td>
						<td>删除</td>
					</tr> -->
				</tbody>
			</table>
</div>

        JS部分

<script type="text/javascript">
		// 逻辑
			// 1.添加信息并展示
			// 2.删除操作
			// 先把数据push到一个数组当中，然后对数组进行遍历(对tr的循环，拼接之后，赋值给tbody的innerHTML)
			let sex = document.getElementById('sex');
			let but = document.getElementById('but');
			let input = document.getElementsByTagName('input');
			let tbody = document.getElementsByTagName('tbody')[0];
			// 模拟一个数据
			// let stus = [{name:"李四",age:19,sex:"男",phone:111}];
			let stus = [];
			// 1.提交 拼接一个对象，作为数组的元素
			but.onclick = function() {
				let obj = {name:input[0].value,age:input[1].value,sex:sex.value,phone:input[2].value};
				stus.push(obj);
				console.log(stus);
				// 对数组进行遍历
				let tr = ''
				stus.forEach((item,index) => {
					tr += "<tr class='newTr'>"+
							"<td>"+item.name+"</td>"+
							"<td>"+item.age+"</td>"+
							"<td>"+item.sex+"</td>"+
							"<td>"+item.phone+"</td>"+
							"<td onclick = 'del("+index+")'>删除</td>"+
						"</tr>";
				});
				tbody.innerHTML = tr;
			}
			// 3.删除操作
			function del(index) {
				// 删除数组中的这条信息
				stus.splice(index,1);// !!!
				// 删除DOM元素
				// tbody.removeChild(该条信息的tr);
				let res = document.getElementsByClassName('newTr')[index];
				tbody.removeChild(res);
			}
</script>

注意事项

1. 界面设计要简洁明了，易于操作和理解。
2. 数据录入要进行合法性校验，防止错误或非法数据的输入。
3. 考虑用户体验，提供友好的反馈和错误提示。
4. 考虑系统的可扩展性和维护性，尽量遵循前端开发的最佳实践。

运用知识

1. HTML：用于构建页面结构。
2. CSS：用于美化页面样式。
3. JavaScript：用于实现页面交互和数据处理。

应用场景

1. 学校的学生管理系统，用于录入学生的个人信息、成绩等数据。
2. 公司的员工管理系统，用于录入员工的基本信息和工作记录。
3. 社团或组织的成员管理系统，用于录入成员的个人信息和活动记录。

案例优化方案

1. 引入表单验证插件，增加数据录入的准确性和合法性。
2. 使用响应式布局，适配不同设备和屏幕尺寸。
3. 使用分页或滚动加载，提高系统的性能和用户体验。
4. 使用缓存技术，减少重复请求和提高系统的响应速度。
5. 使用前端框架，提高开发效率和代码质量。
6. 使用图表库或数据可视化工具，将录入的数据以图表形式展示，提供更直观的数据分析和展示效果。