William Pfaffe William Pfaffe - 3 months ago 8
Javascript Question

Recalling function within a div?

I currently have a table, with some dummy content, using a object called Student:

Student Object:

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


Dummy Student Objects

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

}


Due to the assignment, we are only allowed to hold content within a array. Thus, this array is created

studentArray:

var studentArray = new Array();


This function, is made in order to create a bootstrap table, showing all of the students, within the array.

makeTable function:

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


I have a function, where I have to edit any student within the array. However, upon doing so, the table contents don't get refreshed. I tried making this function, in order to edit the groupID of one of the students, but it wouldnt work:

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

How can I update the content within the table makeTable()?

Edit Updated JSFIDDLE:

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

Github

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

Answer

@William I made some changes in your code. Now Its working fine for assigning group ids. You can check below code

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