div 내에서 함수 호출?

Question

나는 현재 객체를 사용하여 일부 더미 내용으로 테이블,라는 한 학생 :

이

학생 대상 :

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

더미 학생 인해에

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>"); 
} 

는 내가 배열 내에서 학생을 편집 할 수있는 기능을 보유하고 있습니다. 그러나 이렇게하면 테이블 내용이 새로 고쳐지지 않습니다. 나는 학생들이 하나의 그룹 ID를 편집하려면이 기능을 시도했지만 작동을 wouldnt :

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 내 컨텐츠를 업데이트 할 수있는 방법)?

편집 JSFIDDLE 업데이트 :

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

Github에서

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

Answer 1

@William을 내가 코드에서 일부 변경했습니다. 이제는 그룹 ID 할당을 위해 잘 작동합니다. 당신은

<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>