Помогите модернизировать код таким образом, чтобы каждый добавленный через форму студент был объектом, сохранялся в массив объектов (студентов) и после выводился в таблицу HTML
var data = [];
function createObj(firstName,secondName,middleName,birthday,year,faculty){
return {
firstname: firstName,
secondName: secondName,
middleName: middleName,
birthday: birthday,
year: year,
faculty: faculty
}
}
function writeName(){
var name = document.getElementById('name').value;
var last = document.getElementById('last').value;
var middle = document.getElementById('middle').value;
var birthday = document.getElementById('birthday').value;
var year = document.getElementById('year').value;
var faculty = document.getElementById('faculty').value;
// var action = document.getElementById('action');
if(name ===''){
document.getElementById('errorFirstname').innerHTML = 'Имя не введено'
}
if(last === ''){
document.getElementById('errorLastname').innerHTML = 'Фамилия не введена'
}
if(middle === ''){
document.getElementById('errorMiddlename').innerHTML = 'Отчество не введено'
}
if(birthday === ''){
document.getElementById('errorBirthday').innerHTML = 'Дата рождения не введена'
}
if(year === ''){
document.getElementById('errorYear').innerHTML = 'Год начала обучения не введён'
}
if(faculty === ''){
document.getElementById('errorFaculty').innerHTML = 'Факультет не введён'
}
if(name!='' && last!='' && middle!='' && birthday!='' && year!='' && faculty!=''){
clearErrors()
var newPerson = createObj(name,last,middle,birthday,year,faculty)
data.push(newPerson)
var fullName = "Полное имя:"+ last +" "+ name +" "+ middle
// var information = fullName +", Address:"+ address +", Phonenumber:"+ phone
appendValues(name,last,middle,birthday,year,faculty)
}
}
function appendValues(name,last,middle,birthday,year,faculty){
var tableRow = document.createElement("tr");
var nameCell = document.createElement("td")
var lastCell = document.createElement("td")
var middleCell = document.createElement("td")
var birthdayCell = document.createElement("td")
var yearCell = document.createElement("td")
var facultyCell = document.createElement("td")
var actionCell = document.createElement("td")
var actionButton = document.createElement("button")
var nameTextnode = document.createTextNode(name)
var lastTextnode = document.createTextNode(last)
var middleTextnode = document.createTextNode(middle)
var birthdayTextnode = document.createTextNode(birthday)
var yearTextnode = document.createTextNode(year)
var facultyTextnode = document.createTextNode(faculty)
var actionTextnode = document.createTextNode('Delete')
nameCell.appendChild(nameTextnode);
tableRow.appendChild(nameCell)
lastCell.appendChild(lastTextnode);
tableRow.appendChild(lastCell)
middleCell.appendChild(middleTextnode);
tableRow.appendChild(middleCell)
birthdayCell.appendChild(birthdayTextnode);
tableRow.appendChild(birthdayCell)
yearCell.appendChild(yearTextnode);
tableRow.appendChild(yearCell)
facultyCell.appendChild(facultyTextnode)
tableRow.appendChild(facultyCell)
actionButton.onclick = function () {
myDelete(this);
};
actionButton.appendChild(actionTextnode);
actionCell.appendChild(actionButton)
tableRow.appendChild(actionCell)
document.getElementById('table').appendChild(tableRow)
}
function myDelete(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("table").deleteRow(i);
}
function clearText(){
document.getElementById('name').value=""
document.getElementById('last').value=""
document.getElementById('middle').value=""
document.getElementById('birthday').value=""
document.getElementById('year').value=""
document.getElementById('faculty').value=""
}
function clearErrors(){
document.getElementById('errorFirstname').innerHTML = ''
document.getElementById('errorLastname').innerHTML = ''
document.getElementById('errorMiddlename').innerHTML = ''
document.getElementById('errorBirthday').innerHTML = ''
document.getElementById('errorYear').innerHTML = ''
document.getElementById('errorFaculty').innerHTML = ''
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<article>
<div class="container">
<form style="margin-bottom: 15px;">
<div class="form-group">
<label for="name">Имя</label>
<input required class="form-control" type="text" id="name" />
<label for="last">Фамилия</label>
<input required class="form-control" type="text" id="last"/>
<label for="middle">Отчетсво</label>
<input required class="form-control" type="text" id="middle"/>
<label for="birthday">Дата рождения</label>
<input required class="form-control" type="date" id="birthday"/>
<label for="year">Год начала обучения</label>
<input required class="form-control" type="text" id="year"/>
<label for="faculty">Факультет</label>
<input required class="form-control" type="text" id="faculty"/>
</div>
<input type="button" class="btn btn-primary" value="Добавить студента" onclick="writeName();" />
<input type="button" class="btn btn-success" value="Очистить" onclick="clearText();" />
</form>
</div>
</article>
<div>
<table id="table" class="table" style="border: 1px solid black;">
<thead>
<tr>
<th scope="col">Имя</th>
<th scope="col">Фамилия</th>
<th scope="col">Отчетсво</th>
<th scope="col">Дата рождения</th>
<th scope="col">Год начала обучения</th>
<th scope="col">Факультет</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
<span id="errorFirstname"></span>
<span id="errorLastname"></span>
<span id="errorMiddlename"></span>
<span id="errorBirthday"></span>
<span id="errorYear"></span>
<span id="errorFaculty"></span>
</div>