使用DOM生成HTML頁面-Javascript
[英]generate HTML page using DOM - Javascript
問題描述
我有一個關於使用DOM生成HTML頁面的問題，我有一些code來說明我的問題，我嘗試使用school.prototype.createStudent創建新的student ，並且該頁面不顯示任何內容 ，當創建該student時，我需要它顯示在帶有checkbox 的學生列表中 ，如果我想嘗試刪除並查看信息 ，則需要選擇帶有select復選框的學生
我需要遵循以下示例以使用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>
1 個解決方案
解決方案1
1 已采納 2016-05-09 03:00:14
這確實不是完美的，需要進行調整，但是可以。 首先，您忘了創建School對象（我對名為school的變量做了此操作）。 其次，我在學校創建中移動了加載代碼（可能應該從那里提取一些代碼）。 其次，我添加了showStudent函數（如果初始加載也使用create，可以將其加入到create中）。 正如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>
如何使用 JavaScript DOM 向網頁上的 HTML 元素添加文本
[英]How to add text to HTML element on web page using JavaScript DOM
Javascript 是否可以生成 Cheerio 無法提取的 DOM html？
[英]Is it possible for Javascript to generate a DOM html that is unextractable by Cheerio?
如何使用DOM HTML javascript或PHP函數從html頁面恢復數據？
[英]How to recover data from an html page using DOM HTML javascript or PHP function?
帶有事件處理程序以生成 DOM 元素的 Javascript 外部函數不輸出 html
[英]Javascript external function with event handler to generate DOM elements is not outputting html
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
使用javascript DOM生成HTML
使用Javascript動態生成HTML頁面
頁面速度優化：使用javascript和html寫入DOM
如何使用 JavaScript DOM 向網頁上的 HTML 元素添加文本
無法在HTML DOM中生成工具提示？ （javascript）
Javascript 是否可以生成 Cheerio 無法提取的 DOM html？
使用 Javascript 編輯 HTML DOM
使用靜態HTML或靜態DOM Javascript設計頁面？
如何使用DOM HTML javascript或PHP函數從html頁面恢復數據？
帶有事件處理程序以生成 DOM 元素的 Javascript 外部函數不輸出 html
相關標簽