javascript写的学生管理系统，简单的表格操作——小小钟

最新推荐文章于 2023-01-29 14:58:26 发布

xxzblog

最新推荐文章于 2023-01-29 14:58:26 发布

阅读量1.2k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/xxzblog/article/details/8665441

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

对表格的基本操作，增加，删除一行数据

增加一行数据的操作

function add(){
				var id = window.prompt("请输入学生的学号","");
				var name = window.prompt("请输入学生的姓名","");
				var sex = window.prompt("请输入学生的性别","");
				var address = window.prompt("请输入学生的地址","");
				var grade = window.prompt("请输入学生的分数","");
				if(id==null || name==null || sex==null || address==null || grade==null){
					alert("添加失败，信息不能为空!");
					return ;
				}
				var tabNode = document.getElementsByTagName("table")[0];
				var trNode = tabNode.insertRow(count);
				var tdNode0 = trNode.insertCell(0);
				var tdNode1 = trNode.insertCell(1);
				var tdNode2 = trNode.insertCell(2);
				var tdNode3 = trNode.insertCell(3);
				var tdNode4 = trNode.insertCell(4);
				var tdNode5 = trNode.insertCell(5);
				tdNode0.innerHTML = id;
				tdNode1.innerHTML = name;
				tdNode2.innerHTML = sex;
				tdNode3.innerHTML = address;
				tdNode4.innerHTML = grade;
				tdNode5.innerHTML = "<span id='del' οnclick='del(this)'>删除学生</span>";
				count++;
			}

删除一行的操作

function del(index){
				var rowIndex = index.parentNode.parentNode.rowIndex;
				document.getElementById("tb1").deleteRow(rowIndex);
				count--;
			}

下面是源码，当然了这个程序还没有连接数据库

<html>
	<head>
		<script type="text/javascript">
			var count=1;
			function add(){
				var id = window.prompt("请输入学生的学号","");
				var name = window.prompt("请输入学生的姓名","");
				var sex = window.prompt("请输入学生的性别","");
				var address = window.prompt("请输入学生的地址","");
				var grade = window.prompt("请输入学生的分数","");
				if(id==null || name==null || sex==null || address==null || grade==null){
					alert("添加失败，信息不能为空!");
					return ;
				}
				var tabNode = document.getElementsByTagName("table")[0];
				var trNode = tabNode.insertRow(count);
				var tdNode0 = trNode.insertCell(0);
				var tdNode1 = trNode.insertCell(1);
				var tdNode2 = trNode.insertCell(2);
				var tdNode3 = trNode.insertCell(3);
				var tdNode4 = trNode.insertCell(4);
				var tdNode5 = trNode.insertCell(5);
				tdNode0.innerHTML = id;
				tdNode1.innerHTML = name;
				tdNode2.innerHTML = sex;
				tdNode3.innerHTML = address;
				tdNode4.innerHTML = grade;
				tdNode5.innerHTML = "<span id='del' οnclick='del(this)'>删除学生</span>";
				count++;
			}
			
			function del(index){
				var rowIndex = index.parentNode.parentNode.rowIndex;
				document.getElementById("tb1").deleteRow(rowIndex);
				count--;
			}
			
		</script>
		
		<style type="text/css">
			h1{
				text-align:center;
			}
			table {
				width:90%;
				margin:0 auto;
				border:1px solid red;
			}
			#add{
				width:100px;
				height:30px;
				margin-left:25%;
				text-decoration:underline;
				cursor:pointer;
			}
			#del{
				width:65px;
				height:30px;
				text-decoration:underline;
				cursor:pointer;
			}
			tr td{
				text-align:center;
				border:1px;
			}
		</style>	
	</head>
	
	<body>
		<table id="tb1">
			<h1>学生管理系统</h1>
			<div id="add" οnclick="add()">添加学生</div>
			<tr>
				<th>id</th>
				<th>name</th>
				<th>sex</th>
				<th>address</th>
				<th>grade</th>
				<th>Manager</th>
			</tr>
		</table>
	</body>
</html>