HTML+JS 动态网页示例 - 学生信息管理 - 常规

以下是一个基于HTML+JS的动态网页示例，演示如何使用 JavaScript 创建学生信息表格并实现动态添加学生的功能：

<!DOCTYPE html>
<html>
<head>
	<title>动态网页示例 - 学生信息管理</title>
	<script>
		// 定义一个数组，用于存储学生信息
		var students = [
			{name: '张三', age: 18, gender: '男', grade: 85},
			{name: '李四', age: 19, gender: '女', grade: 92},
			{name: '王五', age: 20, gender: '男', grade: 78},
			{name: '赵六', age: 21, gender: '女', grade: 89}
		];

		// 定义一个函数，用于在表格中显示学生信息
		function showStudents() {
			var table = document.getElementById('students-table');
			// 清空表格内容
			table.innerHTML = '';
			// 添加表头
			var row = table.insertRow(0);
			row.insertCell(0).innerHTML = '姓名';
			row.insertCell(1).innerHTML = '年龄';
			row.insertCell(2).innerHTML = '性别';
			row.insertCell(3).innerHTML = '成绩';
			// 添加学生信息
			for (var i = 0; i < students.length; i++) {
				var student = students[i];
				var row = table.insertRow(i+1);
				row.insertCell(0).innerHTML = student.name;
				row.insertCell(1).innerHTML = student.age;
				row.insertCell(2).innerHTML = student.gender;
				row.insertCell(3).innerHTML = student.grade;
			}
		}

		// 定义一个函数，用于添加学生信息
		function addStudent() {
			var name = document.getElementById('name').value;
			var age = document.getElementById('age').value;
			var gender = document.getElementById('gender').value;
			var grade = document.getElementById('grade').value;
			// 创建一个新的学生对象
			var student = {name: name, age: age, gender: gender, grade: grade};
			// 将新的学生对象添加到数组中
			students.push(student);
			// 在表格中显示学生信息
			showStudents();
			// 清空输入框内容
			document.getElementById('name').value = '';
			document.getElementById('age').value = '';
			document.getElementById('gender').value = '';
			document.getElementById('grade').value = '';
		}

		// 页面加载完成后执行的代码
		window.onload = function() {
			// 在页面加载完成后，调用showStudents函数显示学生信息
			showStudents();
			// 给添加按钮绑定点击事件，点击后执行addStudent函数
			document.getElementById('add-btn').onclick = addStudent;
		}
	</script>
</head>
<body>
	<h1>学生信息表</h1>
	<table id='students-table'></table>
	<h2>添加学生信息</h2>
	<form>
		<label>姓名：</label><input type='text' id='name' /><br />
		<label>年龄：</label><input type='text' id='age' /><br />
		<label>性别：</label><input type='text' id='gender' /><br />
		<label>成绩：</label><input type='text' id='grade' /><br />
		<button type='button' id='add-btn'>添加</button>
	</form>
</body>
</html>

该网页包含一个学生信息表格和一个添加学生信息的表单。在页面加载完成后，会调用 showStudents 函数显示学生信息。在添加学生信息时，会创建一个新的学生对象，并将其添加到数组中，然后调用 showStudents 函数更新表格内容。