javascript - 调用 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;
};

虚拟学生对象

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

}

由于分配的原因，我们只能在数组中保存内容。这样就创建了这个数组

学生数组:

var studentArray = new Array();

此函数是为了创建一个引导表，显示数组中的所有学生。

ma​​keTable函数:

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

我有一个函数，我必须编辑数组中的任何学生。但是，这样做后，表内容不会刷新。我尝试制作此功能，以编辑其中一名学生的 groupID，但它不起作用:

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() {
	var studentTable=document.getElementById("studentTable");
	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++){
    	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">
		<h4>
			<small>Overview</small>
		</h4>
		<hr>
		<h2>Overview of all current students</h2>
		<div id="studentTable">
			<script>
				nullStudent();
				makeTable();
			</script>
		</div>
		<br> <br>
		<hr>
		<h2>Create Students</h2>
		<center>

			<h1>Add Student Registry</h1>

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

			<div class='whysign'>

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

	</div>