js实现学生系统增删改查

最新推荐文章于 2023-06-07 17:19:28 发布

@半笺寄幽怀

最新推荐文章于 2023-06-07 17:19:28 发布

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/qq_45848432/article/details/120375216

本文介绍了如何使用JavaScript实现学生信息的增删改查功能。首先，通过创建数组存储学生对象，遍历数组并显示在表格中。接着，详细讲解了添加、删除、修改和查询功能的实现逻辑，包括添加时检查学号唯一性，删除时根据学号定位并移除，修改时的数据回显和更新，以及模糊查询功能的实现。整个过程结合HTML布局，展示了JavaScript在动态操作DOM和处理数据方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路

先讲一下思路，个人认为这个是比较简单，容易理解的。首先，我们创建一个数组，里面存入一些对象数据。然后我们通过遍历数组，得到对象，放到对应的表格中。然后我们实现添加功能，通过获取对应的输入框的值，存到一个对象中，然后通过数组函数push将存储的对象添加到数组中，再将原本的表格移除以后重新遍历数组，就能够将添加过数据的数组遍历到表格当中。删除修改和查询的思路也类似，就是通过操纵数组，再清表，重新遍历实现。话不多说，直接上代码！

一、布局

先用标签将页面布局

<body>
		<div class="nav">
			<input type="text" class="form-control" placeholder="请输入查询的信息" />
			<button type="button" class="btn btn-primary" onclick="vagueSel()">查询</button>
		</div>
		<div class="box1">
			<form action="" method="">
				<span>姓名</span> <input type="text" class="form-control" />
				<span>年龄</span> <input type="number" class="form-control" />
				<span>性别</span> <input type="text" class="form-control" />
				<span>学号</span> <input type="number" class="form-control" /><br>
				<button type="button" class="btn btn-success" onclick="add()">添加</button>
			</form>
		</div>
		<div class="box2">
			<table border="2" class="box">
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>学号</th>
						<th colspan="4">操作</th>
					</tr>
				</thead>
			</table>
		</div>
	</body>

二、获取对象并遍历数组

1、在数组中存入数据，是方便遍历数组能够在页面中查看到效果。

var inp = document.querySelectorAll('input');
		var box = document.querySelector('.box');
		var inputs = document.querySelectorAll('input');
		var btn = document.querySelectorAll('button');
		var strArr = [
			{
				name:'张三',
				age:'18',
				sex:'男',
				stuId:'202101'
			},
			{
				name:'李四',
				age:'20',
				sex:'女',
				stuId:'202102'
			},
			{
				name:'王五',
				age:'22',
				sex:'男',
				stuId:'202103'
			},
			{
				name:'赵六',
				age:'24',
				sex:'女',
				stuId:'202104'
			}
		];

2、遍历数组（重点）

1）创建表格：首先创建tbody节点，为什么创建tbody节点，我们等会再说。先创建再说，然后通过一个for循环调用一个创建表格的函数，这个表格是根据数组长度来创建的，有多少条数据就创建多少行的表格。传入的参数，第一个参数是数组长度+1，用于表格第一列排序。第二个参数是创建的tbody节点，用于后面添加行。

2）填充数据：