使用DOM - Javascript生成HTML页面 [英] generate HTML page using DOM - Javascript
本文介绍了使用DOM - Javascript生成HTML页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个关于使用 DOM 生成 HTML 页面的问题，我有一些代码显示我的问题，我尝试用 school.prototype.createStudent 学生 c>而 页面不显示任何 ，而当学生被创建时，我需要它出现在 学生名单 与复选框，如果我想尝试 删除 ，请选择 复选框
I have a question about generating HTMLpages 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 和 Javascript
And I need to follow this examples to create my scripts with DOMand 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>
推荐答案
这真的不完美，需要调整，但它有效。首先，你忘了创建你的学校对象（我用变量名为 school ）。第二，我将学校创作中的加载代码（有些代码从那里抽出）。第二，我添加一个showStudent函数（如果初始加载使用创建，可以连接创建）。根据torazaburo的建议，您将使用基本的教程练习更多。
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). 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). As suggested by torazaburo, you shall practice yourself more with basic tutorials.
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 - Javascript生成HTML页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
