简单成绩表html,用js来写html的一个小小随机生成成绩表

var students = [];

var lastName = ["赵","钱","孙","李","周","吴","王","许","文","刘","马","范","欧阳","翁","陈"];

var firstName = ["伸义","志泽","梦洁","皓轩","博文","懿轩","煜城","诗茵","子轩","梦璐","凌菲","天磊"];

//学生的函数构造器

function Student(id,lastName,firstName,age,score) {

this.id = id;

this.lastName = lastName;

this.firstNmae = firstName;

this.age = age;

this.score = score;

}

//生成num个学生

var produceStudent = function(num) {

console.log("开始生成学生");

for(var i=0;i

var lastNameIndex = Math.floor(Math.random()*lastName.length);

var firstNameIndex = Math.floor(Math.random()*firstName.length);

var randomAge = Math.floor(Math.random()*3) + 15;

var randomScore = Math.floor(Math.random()*(100+1));

var student = new Student(i+1,lastName[lastNameIndex],firstName[firstNameIndex],randomAge,randomScore);

students.push(student);

}

console.log("所有学生生成成功");

return students;

};

//渲染学生数据

var renderStudent = function(array) {

var html = [];

html.push("

");

html.push("

5班成绩统计

");

html.push("刷新")

html.push("

");

html.push("

html.push("

");

html.push("

序号");

html.push("

姓名");

html.push("

年龄");

html.push("

成绩");

html.push("

");

for(var j=0;j

if(j%2 == 1) {

html.push("

");

} else {

html.push("

");

}

//给每位学生填入数据

html.push("

" + array[j].id + "");

html.push("

" + array[j].lastName + array[j].firstNmae +"");

html.push("

" + array[j].age + "");

html.push("

" + array[j].score + "");

html.push("

");

}

html.push("

")

return html;

}

var allStudent = produceStudent(50); //生成学生

var allHtml = renderStudent(allStudent); //渲染学生数据

document.getElementById("scoreTable").innerHTML = allHtml.join(""); //所有html加入文档

document.getElementById("refresh").onclick = function() {

window.location.reload();

};