js|基于学生分数实例动态表格添加(含完整源码)

本博文源于js基础,旨在探讨如何将输入完毕的分数自动添加到表格进行显示,并能验证出非法数据添加。

实验效果

js|基于学生分数实例动态表格添加(含完整源码)_第1张图片

实验步骤

书写html代码

大家一眼能看出哪些html内容,那些css修饰。在这个案例中,除了表格第二列动态添加外,其他要做基本设置,比如form表单里的四个text,两个按钮,table里一个tr四个td因此,html代码如下:

<form name="form1">
	学号&nbsp;&nbsp;&nbsp;&nbsp;<input name="stuId"><br>
	姓名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="name"><br>
	C语言:&nbsp;&nbsp;<input name="c"><br>
	动态脚本:<input name="js"><br>
	<input type="button" value="显示总分" onclick="SumShow()">
	<input type="reset" value="重置">
	
</form>
<div id="info"></div>
<table id="cj" cellspacing="0" width="100%" align="center" border="1">
	<caption>学生成绩信息统计表</caption>
	<tr>
		<th>学号</th>
		<th>姓名</th>
		<th>C语言</th>
		<th>动态脚本</th>
		<th>总分</th>
	</tr>
</table>

书写css代码

想啊,css代码美其名曰格式修饰,盒子模型/颜色/字体居中/字体大小进行简要修饰就行了。

<style type="text/css">
	caption {
		font-size: 28px;
		line-height: 50px;
		color: blue;
	}
	td {
		text-align: center;
	}
	form {
		border-right: 100px;	
		line-height: 30px;
	}
	input {
		margin-left: 10px;
	}
</style>

书写js代码

js代码纯原生,主要完成分数的合法性判定和动态添加这两个操作。运用的是面向对象的机制,值得一敲。如果大家对面向对象创建不是很明白。这篇博文:
绝了,6种渐进方式创建js对象,第5种最流行!!本次实验js代码应该是先增加行与列,然后判定形式,如果成功那就添加,否则给出提示。

<script>
	function addTable(stu) {
		var tab = document.getElementById("cj")
		var colsNum  = 5;
		rs = tab.insertRow(tab.rows.length);
		for(var i = 0;i<colsNum;i++)
			rs.insertCell(i);
		rs.cells[0].innerHTML = stu.ID;
		rs.cells[1].innerHTML = stu.name;
		rs.cells[2].innerHTML = stu.c;
		rs.cells[3].innerHTML = stu.js;
		rs.cells[4].innerHTML = stu.summation();
		
	}
	function Student(ID,name,c,js) {
		this.ID = ID;
		this.name = name;
		this.c = parseFloat(c);
		this.js = parseFloat(js);
		
	}
	Student.prototype.summation = function() {
		return this.c + this.js;
	}
	var count ;
	var students = new Array();
	var info = document.getElementById('info');
	function SumShow() {
		
		
		with(form1) {
			if(elements[0].value == "" || elements[1].value == "") {
				info.innerHTML = "学号姓名不能为空";
				return ;
			}
			for(var i = 2;i<4;i++) {
				var s = parseFloat(elements[i].value);
				if(s > 100 || s<0 || isNaN(s)) {
					info.innerHTML = "成绩要在0~100之间,请重新输入";
					return ;
				}
			}
			stu = new Student(elements[0].value,elements[1].value,elements[2].value,elements[3].value);
			info.innerHTML = "";
			for(n in students) {
				if(students[n].ID == stu.ID)
				{
					info.innerHTML += "学号重复!";
					return ;
				}
			}
			students[count] = stu;
			count++;
			addTable(stu);
		}
	}
</script>

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			caption {
				font-size: 28px;
				line-height: 50px;
				color: blue;
			}
			td {
				text-align: center;
			}
			form {
				border-right: 100px;
				
				line-height: 30px;
			}
			input {
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<form name="form1">
			学号&nbsp;&nbsp;&nbsp;&nbsp;<input name="stuId"><br>
			姓名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="name"><br>
			C语言:&nbsp;&nbsp;<input name="c"><br>
			动态脚本:<input name="js"><br>
			<input type="button" value="显示总分" onclick="SumShow()">
			<input type="reset" value="重置">
			
		</form>
		<div id="info"></div>
		<table id="cj" cellspacing="0" width="100%" align="center" border="1">
			<caption>学生成绩信息统计表</caption>
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>C语言</th>
				<th>动态脚本</th>
				<th>总分</th>
			</tr>
		</table>
		
		<script>
			function addTable(stu) {
				var tab = document.getElementById("cj")
				var colsNum  = 5;
				rs = tab.insertRow(tab.rows.length);
				for(var i = 0;i<colsNum;i++)
					rs.insertCell(i);
				rs.cells[0].innerHTML = stu.ID;
				rs.cells[1].innerHTML = stu.name;
				rs.cells[2].innerHTML = stu.c;
				rs.cells[3].innerHTML = stu.js;
				rs.cells[4].innerHTML = stu.summation();
				
			}
			function Student(ID,name,c,js) {
				this.ID = ID;
				this.name = name;
				this.c = parseFloat(c);
				this.js = parseFloat(js);
				
			}
			Student.prototype.summation = function() {
				return this.c + this.js;
			}
			var count ;
			var students = new Array();
			var info = document.getElementById('info');
			function SumShow() {
				
				
				with(form1) {
					if(elements[0].value == "" || elements[1].value == "") {
						info.innerHTML = "学号姓名不能为空";
						return ;
					}
					for(var i = 2;i<4;i++) {
						var s = parseFloat(elements[i].value);
						if(s > 100 || s<0 || isNaN(s)) {
							info.innerHTML = "成绩要在0~100之间,请重新输入";
							return ;
						}
					}
					stu = new Student(elements[0].value,elements[1].value,elements[2].value,elements[3].value);
					info.innerHTML = "";
					for(n in students) {
						if(students[n].ID == stu.ID)
						{
							info.innerHTML += "学号重复!";
							return ;
						}
					}
					students[count] = stu;
					count++;
					addTable(stu);
				}
			}
		</script>
	</body>
</html>

总结

本次实验依次讲解如何让js创建动态表格,并能做相应判断,最后添加,尤其在于js的面向对象,可深入体会。

你可能感兴趣的:(JS基础)