Вспоминая функцию в div?

Question

я в настоящее время есть таблица с некоторым фиктивным содержанием, используя объект с именем Student:

Студент Объект:

var Student = function (fullName, email, phone, category, groupID) { 
    this.fullName = fullName; 
    this.email = email; 
    this.phone = phone; 
    this.category = category; 
    this.groupID = groupID; 
}; 

пустышки Student Объекты

function nullStudent(){ 
    var student1 = new Student("børge1","yeye1","agurk1","tlf1",""); 
    var student2 = new Student("børge2","yeye2","agurk2","tlf2",""); 
    var student3 = new Student("børge3","yeye3","agurk3","tlf3",""); 
    var student4 = new Student("børge4","yeye4","agurk4","tlf4",""); 
    var student5 = new Student("børge5","yeye5","agurk5","tlf5",""); 
    var student6 = new Student("børge6","yeye6","agurk6","tlf6",""); 
    studentArray.push(student1); 
    studentArray.push(student2); 
    studentArray.push(student3); 
    studentArray.push(student4); 
    studentArray.push(student5); 
    studentArray.push(student6); 

} 

В связи с присваивание, нам разрешено хранить контент только внутри массива. Таким образом, этот массив создается

studentArray:

var studentArray = new Array(); 

Эта функция сделана для того, чтобы создать загрузочный стол, показывая все студенты, в пределах массива.

makeTable функция:

function makeTable() { 
    document.write("<table class='table table-bordered'>"); 
    document.write("<thead><tr><th>Full Name</th><th>Email</th><th>Phone</th><th>Category</th><th>Group</th><th></th></tr></thead>"); 
    document.write("<tbody>"); 
    for(i = 0; i < studentArray.length; i++){ 
    document.write("<tr><td>" + studentArray[i].fullName +"</td><td>" + studentArray[i].email +"</td><td>" + studentArray[i].phone +"</td><td>" + studentArray[i].category +"</td><td>" + studentArray[i].groupID +"</td><td><button>X</button></td></tr>"); 
    } 
    document.write("</tbody>"); 
    document.write("</table>"); 
} 

У меня есть функция, где я должен изменить любой студент в массиве. Однако после этого содержимое таблицы не обновляется. Я попытался сделать эту функцию для того, чтобы редактировать идентификатор_группы одного из студентов, но он не работал бы:

function addGroup(){ 
    var e = document.getElementById("getStudents"); 
    var strStudent = e.options[e.selectedIndex].value; 

for(i = 0; i< studentArray.length; i++){ 
    if(studentArray[1].fullName === strStudent){ 
     this.studentArray[1].groupID = document.getElementById("groupID").value; 
    } 

} 
alert("Group has been assigned to student!"); 

} 

TL; DR

Как я могу обновить содержимое в таблице makeTable ()?

Edit Обновлено JSFIDDLE:

https://jsfiddle.net/zj1thv05/3/

Github

https://github.com/2joocy/SP2

Answer 1

@William Я сделал некоторые изменения в коде. Теперь он отлично работает для назначения идентификаторов групп. Вы можете проверить ниже код

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script>function addStudent() { 
 
    var fullNameTemp = document.getElementById("fullName").value; 
 
    var studentColorTemp = document.getElementById("category").value; 
 
    var emailTemp = document.getElementById("email").value; 
 
    var phoneTemp = document.getElementById("phone").value; 
 
    var groupID = ""; 
 
    var studentTemp = new Student(fullNameTemp, emailTemp, phoneTemp, studentColorTemp, groupID); 
 
    studentArray.push(studentTemp); 
 
    alert("Student was added! \n\n Full Name: " + studentTemp.fullName + "\n Email: " + studentTemp.email + "\n Phone: " + studentTemp.phone + "\n Category: " + studentTemp.category); 
 
    var table = document.getElementById("tableoverview"); 
 
    table.refresh(); 
 
} 
 

 
function nullStudent(){ 
 
    var student1 = new Student("børge1","yeye1","agurk1","tlf1",""); 
 
    var student2 = new Student("børge2","yeye2","agurk2","tlf2",""); 
 
    var student3 = new Student("børge3","yeye3","agurk3","tlf3",""); 
 
    var student4 = new Student("børge4","yeye4","agurk4","tlf4",""); 
 
    var student5 = new Student("børge5","yeye5","agurk5","tlf5",""); 
 
    var student6 = new Student("børge6","yeye6","agurk6","tlf6",""); 
 
    studentArray.push(student1); 
 
    studentArray.push(student2); 
 
    studentArray.push(student3); 
 
    studentArray.push(student4); 
 
    studentArray.push(student5); 
 
    studentArray.push(student6); 
 
    
 
} 
 

 
function deleteStudent(StudentObj) { 
 
    for (i = 0; i < studentArray.length; i++) { 
 
     if (studentArray[i] = StudentObj) { 
 
      studentArray[i].pop; 
 
      alert("Student has been removed!"); 
 
     }else{ 
 
      alert("Could not find student!"); 
 
     } 
 
    } 
 

 
} 
 

 
var Student = function (fullName, email, phone, category, groupID) { 
 
    this.fullName = fullName; 
 
    this.email = email; 
 
    this.phone = phone; 
 
    this.category = category; 
 
    this.groupID = groupID; 
 
}; 
 

 
var studentArray = new Array(); 
 

 
function makeTable() { 
 
\t var studentTable=document.getElementById("studentTable"); 
 
\t var table=""; 
 
    table="<table class='table table-bordered'>"; 
 
    table+="<thead><tr><th>Full Name</th><th>Email</th><th>Phone</th><th>Category</th><th>Group</th><th></th></tr></thead>"; 
 
    table+="<tbody>"; 
 
    for(i = 0; i < studentArray.length; i++){ 
 
    \t table+="<tr><td>" + studentArray[i].fullName +"</td><td>" + studentArray[i].email +"</td><td>" + studentArray[i].phone +"</td><td>" + studentArray[i].category +"</td><td>" + studentArray[i].groupID +"</td><td><button>X</button></td></tr>"; 
 
    } 
 
    table+="</tbody>"; 
 
    table+="</table>"; 
 
    studentTable.innerHTML=table; 
 
} 
 

 
function getStudentInfo(){ 
 
    document.write("<select id='getStudents'><option>Select A Student</option>"); 
 
    for(i = 0; i < studentArray.length; i++){ 
 
     document.write("<option value="+ studentArray[i].fullName + ">" + studentArray[i].fullName + "</option>"); 
 
    } 
 
    document.write("</select>"); 
 
    
 
    
 
} 
 

 
function addGroup(){ 
 
    var e = document.getElementById("getStudents"); 
 
    var strStudent = e.options[e.selectedIndex].value; 
 
    
 
    for(i = 0; i< studentArray.length; i++){ 
 
     if(studentArray[i].fullName === strStudent){ 
 
      this.studentArray[i].groupID = document.getElementById("groupID").value; 
 
     } 
 
     
 
    } 
 
    alert("Group has been assigned to student!"); 
 
    
 
    makeTable(); 
 
    
 
} 
 

 

 
</script> 
 
<div class="col-sm-9"> 
 
\t \t <h4> 
 
\t \t \t <small>Overview</small> 
 
\t \t </h4> 
 
\t \t <hr> 
 
\t \t <h2>Overview of all current students</h2> 
 
\t \t <div id="studentTable"> 
 
\t \t \t <script> 
 
\t \t \t \t nullStudent(); 
 
\t \t \t \t makeTable(); 
 
\t \t \t </script> 
 
\t \t </div> 
 
\t \t <br> <br> 
 
\t \t <hr> 
 
\t \t <h2>Create Students</h2> 
 
\t \t <center> 
 

 
\t \t \t <h1>Add Student Registry</h1> 
 

 
\t \t \t <div class='signup'> 
 
\t \t \t \t <form> 
 
\t \t \t \t \t <input id="fullName" type='text' placeholder='Full Name:' /> <input 
 
\t \t \t \t \t \t id="email" type='text' placeholder='Email:' /> <input id="phone" 
 
\t \t \t \t \t \t type='text' placeholder='Phone:' /> <input id="category" 
 
\t \t \t \t \t \t type='text' placeholder='Category: ' /> <input type='submit' 
 
\t \t \t \t \t \t placeholder='SUBMIT' onclick="addStudent()" /> 
 
\t \t \t \t </form> 
 
\t \t \t </div> 
 

 
\t \t \t <div class='whysign'> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t <h3>Category is defined in color</h3> 
 
\t \t \t \t <br>Green = Beginner<br> <br>Yellow = Intermediate<br> 
 
\t \t \t \t <br>Red = Advanced<br> <br> 
 
\t \t \t </div> 
 
\t \t </center> 
 
\t \t <hr> 
 
\t \t <center> 
 
\t \t \t <h1>Assign Group</h1> 
 
\t \t \t <br> <br> 
 
\t \t \t <script> 
 
\t \t \t \t getStudentInfo(); 
 
\t \t \t </script> 
 
\t \t \t <input id="groupID" type='text' placeholder='Assign Group ID: ' /> <input 
 
\t \t \t \t type='submit' placeholder='SUBMIT' onclick="addGroup()" /> 
 
\t \t </center> 
 
\t \t <hr> 
 

 
\t </div>