使用DOM生成HTML页面-Javascript

Question

I have a question about generating HTML pages using DOM and I have the some code to show my question, I try to create the new student with school.prototype.createStudent and the page don´t show anything and when the student is created I need it to appear in list of students with checkbox that when if I want to try to remove and see information , I need to select the students with select checkbox 我有一个关于使用DOM生成HTML页面的问题，我有一些code来说明我的问题，我尝试使用school.prototype.createStudent创建新的student ，并且该页面不显示任何内容 ，当创建该student时，我需要它显示在带有checkbox 的学生列表中 ，如果我想尝试删除并查看信息 ，则需要选择带有select复选框的学生

And I need to follow this examples to create my scripts with DOM and Javascript 我需要遵循以下示例以使用DOM和Javascript创建脚本

 function Student(id) { this.id = id; } function School(id) { this.id = id; this.index = 0; this.students = []; } /*School.prototype.createStudent = function() { this.students.push(new Student(this.index++); };*/ function Unload_Document() { var div = document.createElement("div"); div.id = "school"; var h1 = document.createElement("h1"); h1.style.color = "red"; var title = document.createTextNode("High School"); h1.appendChild(title); var h3 = document.createElement("h3"); h3.style.color = "blue"; var subtitle = document.createTextNode("List Of Students:"); h3.appendChild(subtitle); div.appendChild(h1); div.appendChild(h3); /*if (this.students.length !== 0) { for (var i = 0; i < this.students.length; i++) { var chkbox = document.createElement("input"); chkbox.type = "checkbox"; chkbox.name = "Student" + this.students[i].id; chkbox.id = this.students[i].id; div.appendChild(chkbox); } } else { return " "; }*/ var btnCreate = document.createElement("button"); var btnCreateText = document.createTextNode("Create"); btnCreate.appendChild(btnCreateText); btnCreate.onclick = function() { School.createStudent(); } var btnRemove = document.createElement("button"); var btnRemoveText = document.createTextNode("Remove"); btnRemove.appendChild(btnRemoveText); btnRemove.onclick = function() { } var btnInf = document.createElement("button"); var btnInfText = document.createTextNode("Student Information"); btnInf.appendChild(btnInfText); btnInf.onclick = function() { } div.appendChild(btnCreate); div.appendChild(btnRemove); div.appendChild(btnInf); document.body.appendChild(div); }; window.onload = function() { Unload_Document(); };

 #school { display: inline-table; vertical-align: middle; text-align: left; } [id] h1 { font-size: 60px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } [id] h3 { font-size: 40px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } [id] button { margin: 2px; background-color: #0000ff; font-size: 14px; font-weight: bold; color: white; }

 <!DOCTYPE html> <html lang="pt-PT"> <head> <meta charset="UTF-8"> <title>High School</title> </head> <body> <div id="school"></div> </body> </html>

Answer 1

This is really not perfect and need to be adjusted, but it works. 这确实不是完美的，需要进行调整，但是可以。 First of all, you forgot to create your School object (which I did with the variable named school ). 首先，您忘了创建School对象（我对名为school的变量做了此操作）。 Second, I moved the loading code within the school creation (some code shall be extracted from there probably). 其次，我在学校创建中移动了加载代码（可能应该从那里提取一些代码）。 Second, I add a showStudent function (which could be joined to create if initial loading use create too). 其次，我添加了showStudent函数（如果初始加载也使用create，可以将其加入到create中）。 As suggested by torazaburo, you shall practice yourself more with basic tutorials. 正如torazaburo所建议的那样，您将通过基础教程更多地练习自己。

 var school = new School(1); function Student(id) { this.id = id; this.div = null; } function School(id) { this.id = id; this.index = 0; this.students = {}; this.studentsList = document.createElement('DIV'); var self = this; Unload_Document(); function Unload_Document() { var div = document.createElement("div"); div.id = "school"; var h1 = document.createElement("h1"); h1.style.color = "red"; var title = document.createTextNode("High School"); h1.appendChild(title); var h3 = document.createElement("h3"); h3.style.color = "blue"; var subtitle = document.createTextNode("List Of Students:"); h3.appendChild(subtitle); div.appendChild(h1); div.appendChild(h3); div.appendChild(self.studentsList); var btnCreate = document.createElement("button"); var btnCreateText = document.createTextNode("Create"); btnCreate.appendChild(btnCreateText); btnCreate.onclick = function() { school.createStudent(); } var btnRemove = document.createElement("button"); var btnRemoveText = document.createTextNode("Remove"); btnRemove.appendChild(btnRemoveText); btnRemove.onclick = function() { school.removeStudents(); } var btnInf = document.createElement("button"); var btnInfText = document.createTextNode("Student Information"); btnInf.appendChild(btnInfText); btnInf.onclick = function() { school.studentInformation(); } div.appendChild(btnCreate); div.appendChild(btnRemove); div.appendChild(btnInf); document.body.appendChild(div); }; } School.prototype.createStudent = function() { this.students[this.index] = new Student(this.index); this.showStudent(this.index); this.index++; }; School.prototype.showStudent = function(id) { var div = document.createElement('div'); div["data-id"] = this.students[id].id; var chkbox = document.createElement("input"); chkbox.type = "checkbox"; chkbox.name = "Student" + this.students[id].id; chkbox.id = chkbox.name; div.appendChild(chkbox); var chkText = document.createTextNode("Student " + this.students[id].id); div.appendChild(chkText); this.students[id].div = div; this.studentsList.appendChild(div); }; School.prototype.removeStudents = function(id) { //this call the function to remove the students var totalRemoved = 0; for(var studentElementIndex in this.studentsList.childNodes) { var studentElement = this.studentsList.childNodes[studentElementIndex - totalRemoved]; if (studentElement.childNodes[0].checked) { this.removeStudent(studentElement['data-id']); totalRemoved++; } } }; School.prototype.removeStudent = function(id) { //this call the function to remove the students if (!this.students[id]) return; if (this.students[id].div != null) this.studentsList.removeChild(this.students[id].div); delete this.students[id]; }; School.prototype.studentInformation = function() { //this call the arguments to create the new html pages alert("this call the arguments to create the new html pages"); };

 #school { display: inline-table; vertical-align: middle; text-align: left; } [id] h1 { font-size: 60px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } [id] h3 { font-size: 40px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } [id] button { margin: 2px; background-color: #0000ff; font-size: 14px; font-weight: bold; color: white; }

 <!DOCTYPE html> <html lang="pt-PT"> <head> <meta charset="UTF-8"> <title>High School</title> </head> <body> <div id="school"></div> </body> </html>

使用DOM生成HTML页面-Javascript

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-05-09 03:00:14

使用DOM生成HTML页面-Javascript

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-05-09 03:00:14

解决方案1
1 已采纳 2016-05-09 03:00:14