<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="form1">
学号：<input name="stuId"><br>
姓名：<input name="name"><br>
c语言：<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 style="font-size: 28px;line-height: 50px;color: blue;">学生成绩信息统计表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>C语言</th>
<th>动态脚本</th>
<th>总分</th>
<th>删除</th>
</tr>
</table>
<script>
// 功能实现：增加函数addTable(stu)实现动态添加行与列来展示学生信息。
function addTable(stu) {
var tab = document.getElementById("cj");
var colsNum = 6;
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();
rs.cells[5].innerHTML = "<a id=" + stu.Id + "onclick='deleteScore(" + stu.Id + ")'>删除</a>";
}
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();
function SumShow() {
with(form1) {
if (elements[0].value == "" || elements[1].value == "") {
document.getElementById('info').innerHTML = "学号和姓名不能为空";
return;
}
for (var i = 2; i < 4; i++) {
var s = parseFloat(elements[i].value);
if (s > 100 || s < 0 || isNaN(s)) {
document.getElementById("info").innerHTML = "成绩要在0~100之间，请重新输入！";
return;
}
}
stu = new Student(elements[0].value, elements[1].value, elements[2].value, elements[3].value);
document.getElementById('info').innerHTML = "";
for (n in students) {
if (students[n].Id == stu.Id) {
documnet.getElementById("info").innerHTML += "学号重！";
return;
}
}
function deleteScore(ID) {
//增加deleteScore(ID)函数实现动态删除行
var a = document.getElementById(ID); //获得删除按钮
var i = a.parentNode.parentNode.rowIndex; //访问被删除的行的索引
document.getElementById("cj").deleteRow(i); //删除行
for (var n in students){
if (students[n].Id == ID)
students.splice(n, 1);}
}
students[count] = stu;
count++;
addTable(stu);
}
}
</script>
</body>
</html>
