js实现学生系统增删改查

最新推荐文章于 2024-07-26 20:46:33 发布

@半笺寄幽怀

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量1.4k

点赞数 3

文章标签： javascript html

本文链接：https://blog.csdn.net/qq_45848432/article/details/120375216

版权

思路

先讲一下思路，个人认为这个是比较简单，容易理解的。首先，我们创建一个数组，里面存入一些对象数据。然后我们通过遍历数组，得到对象，放到对应的表格中。然后我们实现添加功能，通过获取对应的输入框的值，存到一个对象中，然后通过数组函数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循环调用一个创建表格的函数

最低0.47元/天解锁文章

@半笺寄幽怀

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
js实现学生系统增删改查

目录思路一、布局二、获取对象并遍历数组三、实现添加功能四、实现删除功能五、实现修改功能六、实现上下移动七、实现模糊查询思路先讲一下思路，个人认为这个是比较简单，容易理解的。首先，我们创建一个数组，里面存入一些对象数据。然后我们通过遍历数组，得到对象，放到对应的表格中。然后我们实现添加功能，通过获取对应的输入框的值，存到一个对象中，然后通过数组函数push将存储的对象添加到数组中，再将原本的表格移除以后重新遍历数组，就能够将添加过数据的数组遍历到表格当中。删除修..
复制链接

扫一扫