Как добавлять информацию о студентах из полей ввода? После ввода данных в поля и нажатие кнопки, должна добавляться запись о новом студенте а поле ввода очищаться. А данные о студенте заноситься в масив student.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<table class="table" border="1" width="100%" cellpadding="5">
<tbody class="table-wrapper">
<tr class="heading">
<th class="heading__name">Ф.И.О.</th>
<th class="heading__faculty">Факультет</th>
<th class="heading__birth">дата рождения</th>
<th class="heading__training">год начала обучения</th>
</tr>
<tr class="student">
<td class="student__name"></td>
<td class="student__faculty"></td>
<td class="student__birth"><span class="age"></span></td>
<td class="student__training"><span class="course"></span></td>
</tr>
</tbody>
</table>
<form class="form" >
<input class="inp-name" type="text" placeholder="Имя">
<input class="inp-surname" type="text" type="text" placeholder="Фамилия">
<input class="inp-patronymic" type="text" type="text" placeholder="Отчество">
<input class="inp-birth" type="text" type="date" min="01.01.1900" placeholder="дата рождения">
<input class="inp-training" type="text" type="date" min="01.01.2000" placeholder="год начала обучения">
<input class="inp-faculty" type="text" type="text" placeholder="Факультет">
</form>
<button class="button">Добавить студента</button>
</div>
<script src="main.js"></script>
</body>
</html>
let student = [
{
name: "Иван",
patronymic: "Иванович",
surname: "Иванов",
birth: "12.12.2002",
training: "2020",
faculty: "Химия",
},
{
name: "Иван",
patronymic: "Иванович",
surname: "Иванов",
birth: "12.12.2002",
training: "2020",
faculty: "Химия",
},
];
let button = document.querySelector(".button");
let studentName = document.querySelector(".student__name");
let studentFaculty = document.querySelector(".student__faculty");
let studentBirth = document.querySelector(".student__birth");
let studentTraining = document.querySelector(".student__training");
// записываем данные в масив
// student.push( {
// name: 'Иван',
// patronymic: 'Иванович',
// surname: 'Иванов',
// birth: '12.12.2002',
// training : '2020',
// faculty : 'Химия'
// }, )
// функция создающую ячейки таблицы
function writeTable() {
let fragment = new DocumentFragment();
for (let i = 0; i < 4; i++) {
let td = document.createElement("td");
if (i == 0) {
td.classList.add("student__name");
} else if (i == 1) {
td.classList.add("student__faculty");
} else if (i == 2) {
td.classList.add("student__birth");
} else if (i == 3) {
td.classList.add("student__birth");
}
fragment.append(td);
}
return fragment;
}
// Заполняем форму
button.onclick = function () {
let name = document.querySelector(".inp-name").value;
let surname = document.querySelector(".inp-surname").value;
let patronymic = document.querySelector(".inp-patronymic").value;
let birth = document.querySelector(".inp-birth").value;
let training = document.querySelector(".inp-training").value;
let faculty = document.querySelector(".inp-faculty").value;
studentName.innerHTML = name + patronymic + surname;
studentBirth.innerHTML = birth;
studentTraining.innerHTML = training;
studentFaculty.innerHTML = faculty;
// создаем строку таблицы
let tr = document.createElement("tr");
document.querySelector(".table-wrapper").append(tr);
tr.append(writeTable());
};