Android学生成绩管理系统总结学生成绩管理系统前端

转载

autohost 2024-07-26 08:35:06

文章标签 Android学生成绩管理系统总结 html css jquery javascript 文章分类 Android 移动开发

效果

在左边填写信息，点击提交录入右边的表格；

序号自增（不使用数组的方法删除该行后序号有误）；

点击各行的修改按钮，提取数据回显到左边的输入框中，修改后点击提交，修改后的内容显示在表格中；

点击各行的删除按钮，从表格中删除该条数据；

Android学生成绩管理系统总结学生成绩管理系统前端_Android学生成绩管理系统总结

Android学生成绩管理系统总结学生成绩管理系统前端_html_02

Android学生成绩管理系统总结学生成绩管理系统前端_html_03

不使用数组的不完整js实现方法

html标签

<!-- 左边部分 -->
		<div id="left">
			<span id="title">填写信息</span>
			<form class="form" id="form" onsubmit="return false">
				<div class="form-group">
					<input id="name" type="text" placeholder="请输入姓名">
					<hr />
				</div>
				<div class="form-group">
					<input id="num" type="text" placeholder="请输入学号">
					<hr />
				</div>
				<div class="form-group">
					<input id="classes" type="text" placeholder="请输入班级">
					<hr />
				</div>
				<div class="form-group">
					<input id="course" type="text" placeholder="请输入课程名称">
					<hr />
				</div>
				<div class="form-group">
					<input id="score" type="text" placeholder="请输入课程分数">
					<hr />
				</div>
				<button id="left-btn" type="submit" onclick="add()">提交</button>
			</form>
		</div>
		<!-- 左边部分结束 -->


		<!-- 右边部分 -->
		<div id="right">
			<table id="tb-title" rules="all">
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>学号</th>
					<th>班级</th>
					<th>课程</th>
					<th>分数</th>
					<th>操作</th>
				</tr>

				<tr>
					<td><span id="number">1</span></td>
					<td>张三</td>
					<td>631646131</td>
					<td>一年级1班</td>
					<td>数学</td>
					<td>90</td>
					<td>
						<button onclick="edit()">修改</button>
						<button onclick="del()">删除</button>
					</td>
				</tr>
			</table>
		</div>
		<!-- 右边部分结束 -->

js

<script>
			function add() {
				var name = document.getElementById("name").value;
				var num = document.getElementById("num").value;
				var classes = document.getElementById("classes").value;
				var course = document.getElementById("course").value;
				var score = document.getElementById("score").value;				
				// 检查输入
				if (name == null || name == "") {
					alert("姓名不能为空");
					return false;
				} else if (num == null || num == "") {
					alert("学号不能为空");
					return false;
				} else if (classes == null || classes == "") {
					alert("班级不能为空");
					return false;
				} else if (course == null || course == "") {
					alert("课程不能为空");
					return false;
				} else if (score == null || score == "") {
					alert("分数不能为空");
					return false;
				} else {
					//创建一行
					var tr = document.createElement("tr");
					var td1 = document.createElement("td");
					var td2 = document.createElement("td");
					var td3 = document.createElement("td");
					var td4 = document.createElement("td");
					var td5 = document.createElement("td");
					var td6 = document.createElement("td");
					var td7 = document.createElement("td");

					//获取到的值进行赋值
					td2.innerHTML = name;
					td3.innerHTML = num;
					td4.innerHTML = classes;
					td5.innerHTML = course;
					td6.innerHTML = score;

					//序号自增
					var n = document.createElement("span");
					var rows = document.getElementsByTagName("tr");
					var t = document.createTextNode(rows.length);
					n.appendChild(t);
					td1.appendChild(n);

					//操作中的两个button
					var btn = document.createElement("div");
					var btn_1 = document.createElement("button");
					var btn_2 = document.createElement("button");
					btn_1.innerHTML = "修改";
					btn_1.setAttribute('onclick', 'edit(this)');
					btn_2.innerHTML = "删除";
					btn_2.setAttribute('onclick', 'del(this)');
					btn.appendChild(btn_1);
					btn.appendChild(btn_2);
					//button组放入td7
					td7.appendChild(btn);

					//将所有td标签对放入tr中
					tr.appendChild(td1);
					tr.appendChild(td2);
					tr.appendChild(td3);
					tr.appendChild(td4);
					tr.appendChild(td5);
					tr.appendChild(td6);
					tr.appendChild(td7);
					var table = document.getElementById("tb-title");
					table.appendChild(tr);
					document.getElementById("form").reset();
				}
			}

			//修改
			function edit(obj) {
				//获取到的值显示在form表单中
				var parentTr = obj.parentNode.parentNode.parentNode;
				var td_gp = parentTr.childNodes;
				document.getElementById("name").value = td_gp[1].innerHTML;
				document.getElementById("num").value = td_gp[2].innerHTML;
				document.getElementById("classes").value = td_gp[3].innerHTML;
				document.getElementById("course").value = td_gp[4].innerHTML;
				document.getElementById("score").value = td_gp[5].innerHTML;
				//这里绑定了两次，存在一定问题但不影响运行结果，jQuery方法中进行了修改
				document.getElementById("left-btn").onclick=function(){
					//获取input框的值
					var name = document.getElementById("name").value;
					var num = document.getElementById("num").value;
					var classes = document.getElementById("classes").value;
					var course = document.getElementById("course").value;
					var score = document.getElementById("score").value;
					// 检查输入
					if (name == null || name == "") {
						alert("姓名不能为空");
						return false;
					} else if (num == null || num == "") {
						alert("学号不能为空");
						return false;
					} else if (classes == null || classes == "") {
						alert("班级不能为空");
						return false;
					} else if (course == null || course == "") {
						alert("课程不能为空");
						return false;
					} else if (score == null || score == "") {
						alert("分数不能为空");
						return false;
					} else {
						td_gp[1].innerHTML = name;
						td_gp[2].innerHTML = num;
						td_gp[3].innerHTML = classes;
						td_gp[4].innerHTML = course;
						td_gp[5].innerHTML = score;						
					}
				}
			}


			//删除
			function del(obj) {
				var parentTr = obj.parentNode.parentNode.parentNode;
				document.getElementById("tb-title").removeChild(parentTr);
			}
		</script>

css

#left{
	width: 300px;
}
#title{
	position: absolute;
	left: 120px;
	top: 70px;
	width: 100px;
	height: 30px;
	font-size: 20px;
	text-align: center;
}
#left form{
	width: 250px;
	position: absolute;
	left: 50px;
	top: 120px;

}
#left-btn{
	position: absolute;
	top: 265px;	
	width: 250px;
	height: 30px;
	background: rgba(45, 153, 254, 1);
	opacity: 1;
	border: 1px solid rgba(45, 153, 254, 1);
	border-radius: 2px;
	font-size: 12px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	line-height: 22px;
	color: rgba(255, 255, 255, 1);
	
}
.form-group{
	width: 250px;
	height: 50px;
}
.form-group span{
	margin-left: 20px;
}
input {
	width: 90%;	
	color: #000000;
	font-weight: 100;
	border: none;
	background: none;
	outline: none;
	padding: 5px;
	font-size: 13px;
}
hr{
	width: 250px;
}




#right{
	position: absolute;
	left: 360px;	
	
}
#tb-title{
	width: 900px;
	position: absolute;
	top: 60px;
	text-align: center;
	border: 1px solid rgba(45, 153, 254, 1);
	
}
input:-webkit-autofill {
	box-shadow: 0 0 0px 1000px white inset !important;
}

使用数组的js实现方式

html标签

<!-- 左边部分 -->
		<div id="left">
			<span id="title">填写信息</span>
			<form class="form" id="form" onsubmit="return false">
				<input id="id" type="hidden" />
				<div class="form-group">
					<input id="name" type="text" placeholder="请输入姓名">
					<hr />
				</div>
				<div class="form-group">
					<input id="num" type="text" placeholder="请输入学号">
					<hr />
				</div>
				<div class="form-group">
					<input id="classes" type="text" placeholder="请输入班级">
					<hr />
				</div>
				<div class="form-group">
					<input id="course" type="text" placeholder="请输入课程名称">
					<hr />
				</div>
				<div class="form-group">
					<input id="score" type="text" placeholder="请输入课程分数">
					<hr />
				</div>
				<button id="left-btn" type="submit" onclick="add()">提交</button>
			</form>
		</div>
		<!-- 左边部分结束 -->


		<!-- 右边部分 -->
		<div id="right">
			<table id="tb-title" rules="all">
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>学号</th>
						<th>班级</th>
						<th>课程</th>
						<th>分数</th>
						<th>操作</th>
					</tr>
				</thead>

				<tbody id="tbody">
				</tbody>
			</table>
		</div>
		<!-- 右边部分结束 -->

js

<script>
			//创建数组
			var arr = [];
			//tbody内容
			function val(){
				var tbodyHtmlStr = '';
				for(var i = 0; i < arr.length; i++) {
					tbodyHtmlStr += '<tr>';
					tbodyHtmlStr += '<td>'+(i+1)+'</td>';
					tbodyHtmlStr += '<td>'+arr[i].name+'</td>';
					tbodyHtmlStr += '<td>'+arr[i].num+'</td>';
					tbodyHtmlStr += '<td>'+arr[i].classes+'</td>';
					tbodyHtmlStr += '<td>'+arr[i].course+'</td>';
					tbodyHtmlStr += '<td>'+arr[i].score+'</td>';
					tbodyHtmlStr += '<td>';
					tbodyHtmlStr += '<button onclick="edit(this,' + i + ')">修改</button>';
					tbodyHtmlStr += '<button onclick="del(this,' + i + ')">删除</button>';
					tbodyHtmlStr += '</td>';
					tbodyHtmlStr += '</tr>';					
				}return tbodyHtmlStr;
			} 
		
			function add() {
				var id = document.getElementById("id").value;
				var name = document.getElementById("name").value;
				var num = document.getElementById("num").value;
				var classes = document.getElementById("classes").value;
				var course = document.getElementById("course").value;
				var score = document.getElementById("score").value;
				//检查输入
				if (name == null || name == "") {
					alert("姓名不能为空");
					return false;
				} else if (num == null || num == "") {
					alert("学号不能为空");
					return false;
				} else if (classes == null || classes == "") {
					alert("班级不能为空");
					return false;
				} else if (course == null || course == "") {
					alert("课程不能为空");
					return false;
				} else if (score == null || score == "") {
					alert("分数不能为空");
					return false;
				} else {
					if(id == '' || id == undefined) {
						arr.push({
							name: name,
							num: num,
							classes: classes,
							course: course,
							score: score,
						});
					} else {
						arr[id] = {
							name: name,
							num: num,
							classes: classes,
							course: course,
							score: score,
						};
					}
					
					document.getElementById("tbody").innerHTML = val();
					document.getElementById("form").reset();	
				}			
			}


			//删除
			function del(obj,i){
				arr.splice(i,1);
				document.getElementById("tbody").innerHTML = val();
			}


			//修改
			function edit(obj,i){
				//获取到的值显示在form表单中
				document.getElementById("id").value = i;
				document.getElementById("name").value = arr[i].name;
				document.getElementById("num").value = arr[i].num;
				document.getElementById("classes").value = arr[i].classes;
				document.getElementById("course").value = arr[i].course;
				document.getElementById("score").value = arr[i].score;
			}
						
		</script>

css

同上

使用jQuery实现

html标签

与之前的方法相比，只删除了提交按钮的绑定事件

<!-- 左边部分 -->
		<div id="left">
			<span id="title">填写信息</span>
			<form class="form" id="form" onsubmit="return false">
				<input id="id" type="hidden" />
				<div class="form-group">
					<input id="name" type="text" placeholder="请输入姓名">
					<hr />
				</div>
				<div class="form-group">
					<input id="num" type="text" placeholder="请输入学号">
					<hr />
				</div>
				<div class="form-group">
					<input id="classes" type="text" placeholder="请输入班级">
					<hr />
				</div>
				<div class="form-group">
					<input id="course" type="text" placeholder="请输入课程名称">
					<hr />
				</div>
				<div class="form-group">
					<input id="score" type="text" placeholder="请输入课程分数">
					<hr />
				</div>
				<button id="left-btn" type="submit">提交</button>
			</form>
		</div>
		<!-- 左边部分结束 -->

		<!-- 右边部分 -->
		<div id="right">
			<table id="tb-title" rules="all">
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>学号</th>
						<th>班级</th>
						<th>课程</th>
						<th>分数</th>
						<th>操作</th>
					</tr>
				</thead>

				<tbody id="tbody">

				</tbody>
			</table>
		</div>
		<!-- 右边部分结束 -->

js

<script src="js/jquery-3.4.1.min.js"></script>
		<script>
			//创建数组
			var arr = [];

			function val() {
				var tbodyHtmlStr = '';
				for (var i = 0; i < arr.length; i++) {
					tbodyHtmlStr += '<tr>';
					tbodyHtmlStr += '<td>' + (i + 1) + '</td>';
					tbodyHtmlStr += '<td>' + arr[i].name + '</td>';
					tbodyHtmlStr += '<td>' + arr[i].num + '</td>';
					tbodyHtmlStr += '<td>' + arr[i].classes + '</td>';
					tbodyHtmlStr += '<td>' + arr[i].course + '</td>';
					tbodyHtmlStr += '<td>' + arr[i].score + '</td>';
					tbodyHtmlStr += '<td>';
					tbodyHtmlStr += '<button onclick="edit(this,' + i + ')">修改</button>';
					tbodyHtmlStr += '<button onclick="del(this,' + i + ')">删除</button>';
					tbodyHtmlStr += '</td>';
					tbodyHtmlStr += '</tr>';
				}
				return tbodyHtmlStr;
			}

			$("#left-btn").click(function() {
				var id = $("#id").val();
				var name = $("#name").val();
				var num = $("#num").val();
				var classes = $("#classes").val();
				var course = $("#course").val();
				var score = $("#score").val();
				//检查输入
				if (name == null || name == "") {
					alert("姓名不能为空");
					return false;
				} else if (num == null || num == "") {
					alert("学号不能为空");
					return false;
				} else if (classes == null || classes == "") {
					alert("班级不能为空");
					return false;
				} else if (course == null || course == "") {
					alert("课程不能为空");
					return false;
				} else if (score == null || score == "") {
					alert("分数不能为空");
					return false;
				} else {
					if (id == '' || id == undefined) {
						arr.push({
							name: name,
							num: num,
							classes: classes,
							course: course,
							score: score,
						});
					} else {
						arr[id] = {
							name: name,
							num: num,
							classes: classes,
							course: course,
							score: score,
						};
					}
					$("#tbody").html(val());
					$("#form")[0].reset();
				}
			});

			//删除
			function del(obj, i) {
				arr.splice(i, 1);
				$("#tbody").html(val());
			}

			//修改
			function edit(obj, i) {
				//获取到的值显示在form表单中
				$("#id").val(i);
				$("#name").val(arr[i].name);
				$("#num").val(arr[i].num);
				$("#classes").val(arr[i].classes);
				$("#course").val(arr[i].course);
				$("#score").val(arr[i].score);
			}
		</script>

css

同上

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：centos6安装meld

下一篇：python获取自己抖音账号作品信息 python获取xhr

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

Android学生成绩管理系统总结学生成绩管理系统前端

Android学生成绩管理系统总结学生成绩管理系统前端

目录

效果

不使用数组的不完整js实现方法

html标签

js

css

使用数组的js实现方式

html标签

js

css

使用jQuery实现

html标签

js

css

51CTO博客

Android学生成绩管理系统总结 学生成绩管理系统前端

Android学生成绩管理系统总结 学生成绩管理系统前端

目录

效果

不使用数组的不完整js实现方法

html标签

js

css

使用数组的js实现方式

html标签

js

css

使用jQuery实现

html标签

js

css

51CTO博客

Android学生成绩管理系统总结学生成绩管理系统前端

Android学生成绩管理系统总结学生成绩管理系统前端