卸載信息 - 使用Javascript

我的問題是基於前一個問題generate HTML page using DOM - Javascript，總部設在這個圖像in down, I could solve the question with @MasterDJon orientation it's工作得很好，但it's不完整，卸載信息 - 使用Javascript

因爲人仍下落不明的創建爲student informaion button和喜歡的腳本和頁面it's工作的情況下，但我需要Unload_Student看信息的時候也是選擇複選框，我需要返回當網頁或學校網頁我點擊按鈕返回學校頁面，如果您不明白我的問題，請嘗試運行代碼片段以查看結果。

PS：總結和最後，我想就轉移到學生的頁面，然後返回到主頁與button event

var school = new School(1); 
 

 
function Student(id) { 
 
    this.id = id; 
 
    this.div = null; 
 

 
    var self = this; 
 
    Unload_Student(this.id); 
 

 
    function Unload_Student(index) { 
 

 
    var div = document.createElement("div"); 
 
    div.id = "student"; 
 

 
    var h1 = document.createElement("h1"); 
 
    h1.style.color = "red"; 
 

 
    var title = document.createTextNode("Student " + index + " informations:"); 
 
    h1.appendChild(title); 
 

 
    var h3 = document.createElement("h3"); 
 
    h3.style.color = "blue"; 
 

 
    var subtitle = document.createTextNode("List Of Books:"); 
 
    h3.appendChild(subtitle); 
 

 
    div.appendChild(h1); 
 
    div.appendChild(h3); 
 

 

 
    var btnBack = document.createElement("button"); 
 
    var btnBackText = document.createTextNode("Return to School Page"); 
 
    btnBack.appendChild(btnBackText); 
 
    btnBack.onclick = function() { 
 
     //return to school page 
 
     //but it´s not function 
 
     school.Unload_School(); 
 
    } 
 

 
    div.appendChild(btnBack); 
 

 
    document.body.appendChild(div); 
 
    }; 
 

 
} 
 

 

 
function School(id) { 
 
    this.id = id; 
 
    this.index = 0; 
 
    this.students = {}; 
 
    this.studentsList = document.createElement('DIV'); 
 

 
    var self = this; 
 
    Unload_School(); 
 

 
    function Unload_School() { 
 

 
    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.studentInformations(); 
 
    } 
 

 
    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.studentInformations = function() { 
 
    for (var studentIndex in this.studentsList.childNodes) { 
 
    var studentInf = this.studentsList.childNodes[studentIndex]; 
 
    if (studentInf.childNodes[0].checked) { 
 
     this.studentInformation(studentInf['piso-id']); 
 
    } 
 
    } 
 
}; 
 

 

 
School.prototype.studentInformation = function(id) { 
 
    if (!this.students[id]) { 
 
    return; 
 
    } 
 
    if (this.students[id].div != null) { 
 
    //need to call the UnloadStudent 
 
    this.students[id].Unload_Student(this.students[id].id); 
 

 
    } 
 
};

#school { 
 
    display: inline-table; 
 
    vertical-align: middle; 
 
    text-align: left; 
 
} 
 
#student { 
 
    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>

來源

2016-05-09 Renata P Souza

你需要做的，這是純JavaScript？你可以使用框架嗎？ – whipdancer

@whipdancer，它只是在javascript和DOM中，沒有框架，我想在複選框中選擇學生時調用'function Unload_Student（index）'，如果我在複選框中選擇學生，我可以刪除，但我想選擇並通過函數調用函數Unload_Student（index）' –

@wddancer來查看信息，我在'student class'裏面加入這個函數UnloadStdent（index）來查看結果，但是當我點擊'學生信息按鈕'時需要調用並且如果可以返回到主頁，並且按鈕返回到學校頁面 –

我找到了解決方案，問題是我打電話給private function外面的課，解決辦法是創建public function調用該private function，優點爲@MasterDJon你的方向，由於

var school = new School(1); 
 

 
function Student(id) { 
 
    this.id = id; 
 
    this.div = null; 
 

 
    //public function to call private function 
 
    this.showInformation = function() { 
 
    Unload_Student(this.id); 
 
    } 
 

 
    //private function 
 
    function Unload_Student(index) { 
 

 
    var div = document.createElement("div"); 
 
    div.id = "student"; 
 

 
    var h1 = document.createElement("h1"); 
 
    h1.style.color = "red"; 
 

 
    var title = document.createTextNode("Student " + index + " informations:"); 
 
    h1.appendChild(title); 
 

 
    var h3 = document.createElement("h3"); 
 
    h3.style.color = "blue"; 
 

 
    var subtitle = document.createTextNode("List Of Books:"); 
 
    h3.appendChild(subtitle); 
 

 
    div.appendChild(h1); 
 
    div.appendChild(h3); 
 

 

 
    var btnBack = document.createElement("button"); 
 
    var btnBackText = document.createTextNode("Return to School Page"); 
 
    btnBack.appendChild(btnBackText); 
 
    btnBack.onclick = function() { 
 
     //call school page to Unloadd_School 
 
     //it´s work 
 
     school.schoolPage(); 
 
    } 
 

 
    div.appendChild(btnBack); 
 

 
    document.body.appendChild(div); 
 
    }; 
 

 
} 
 

 

 
function School(id) { 
 
    this.id = id; 
 
    this.index = 0; 
 
    this.students = {}; 
 
    this.studentsList = document.createElement('DIV'); 
 
    var self = this; 
 
    Unload_School(); 
 

 
    //public function to call private function 
 
    this.schoolPage = function() { 
 
    Unload_School(); 
 
    } 
 

 
    //private function 
 
    function Unload_School() { 
 

 
    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.studentInformations(); 
 
    } 
 

 
    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.studentInformations = function() { 
 
    for (var studentIndex in this.studentsList.childNodes) { 
 
    var studentInf = this.studentsList.childNodes[studentIndex]; 
 
    if (studentInf.childNodes[0].checked) { 
 
     this.studentInformation(studentInf['data-id']); 
 
    } 
 
    } 
 
}; 
 

 

 
School.prototype.studentInformation = function(id) { 
 
    if (!this.students[id]) { 
 
    return; 
 
    } 
 
    if (this.students[id].div != null) { 
 
    // call the showInformation to Unload_Students 
 
    //it´s work 
 
    this.students[id].showInformation(); 
 

 
    } 
 
};

#school { 
 
    display: inline-table; 
 
    vertical-align: middle; 
 
    text-align: left; 
 
} 
 

 
#student { 
 
    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>

來源

2016-05-10 00:50:43

卸載信息 - 使用Javascript

回答

相關問題