Здравствуйте, хочу вывести массив объектов в таблицу с помощью js в html страницу. На странице есть форма, с помощью которой массив наполняется объектами, т е. длина массива, как и таблицы неизвестна. Я сделала функцию, которая по идее должна заполняться по клику в форме, то есть создается объект, он попадает в массив и далее выводится в таблицу. Но каждый раз появляется строчка но пустая, хотя по консоли объект в массиве есть. Как заполнить строки свойствами объектов массива, в чём может быть проблема?
<table id="table" border="1"></table>
<form id="form">
<label>ФИО <input type="text" name="Fullname" id="Fullname"></label>
<label>Дата рождения <input type="date" name="Birthday" id="Birthday"></label>
<label>Год начала обучения
<select name="YearEd" id="YearEd">
<option value=""></option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
</label>
<label>Факультет <input type="text" name="Faculty" id="Faculty"></label>
<input type="button" id="submit" value="Добавить студента">
</form>
?
let Students = [],
submitbtn = document.querySelector('#submit'),
table = document.getElementById('table');
class Student {
constructor() {
this.Fullname = document.getElementById('Fullname').value;
this.birthday = document.getElementById('Birthday').value;
this.year = document.getElementById('YearEd').value;
this.faculty = document.getElementById('Faculty').value;
}
}
function createStudentArr(array) {
array.push(new Student);
}
function getTable(table, arr) {
for (let i = 0; i < arr.length; i++) {
let tr = document.createElement('tr');
for (let j = 0; j < arr[i].length; j++) {
let td = document.createElement('td');
td.innerHTML = arr[i][j];
tr.appendChild(td);
}
table.appendChild(tr);
}
}
submitbtn.addEventListener('click', (event) => {
event.preventDefault();
createStudentArr(Students);
console.log(Students);
getTable(table, Students);
})
Простой
