<!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">
<thead class="table__head">
<tr class="heading">
<th class="heading__name">Ф.И.О.</th>
<th class="heading__faculty">Факультет</th>
<th class="heading__birth">дата рождения</th>
<th class="heading__training">год начала обучения</th>
</tr>
</thead>
<tbody class="table-wrapper">
</tbody>
</table>
<form class="form" >
<label>Имя:<input class="inp-name" type="text"></label>
<label>Фамилия:<input class="inp-surname" type="text" type="text"></label>
<label>Отчество:<input class="inp-patronymic" type="text" type="text"></label><br>
<label>дата рождения:<input class="inp-birth" type="text" type="date" min="01.01.1900"></label><br>
<label>год начала обучения:<input class="inp-training" type="text" type="date" min="01.01.2000"></label><br>
<label>Факультет:<input class="inp-faculty" type="text" type="text"></label>
</form>
<button class="button">Добавить студента</button>
</div>
<template id=tmp>
<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>
</template>
<script>
let student = [
{
name: "Иван",
patronymic: "Иванович",
surname: "Иванов",
birth: "12.12.2002",
training: "2020",
faculty: "Химия",
},
{
name: "Петр",
patronymic: "Петрович",
surname: "Петров",
birth: "12.10.2001",
training: "2020",
faculty: "Химия",
},
];
const addRow = (data) => {
const fullname = data.surname +' ' + data.name + ' ' + data.patronymic
const tmprow = document.getElementById('tmp').content.querySelector('tr')
const row = tmprow.cloneNode(true)
row.querySelector(".student__name").innerHTML = fullname
row.querySelector(".student__faculty").innerHTML = data.faculty
row.querySelector(".student__birth").innerHTML = data.birth
row.querySelector(".student__training").innerHTML = data.training
let tb = document.querySelector('table').tBodies[0].append(row)
}
// Заполняем форму
document.querySelector('.button').onclick = function () {
let data = {
name: document.querySelector(".inp-name").value,
surname: document.querySelector(".inp-surname").value,
patronymic: document.querySelector(".inp-patronymic").value,
birth: document.querySelector(".inp-birth").value,
training: document.querySelector(".inp-training").value,
faculty: document.querySelector(".inp-faculty").value,
}
addRow (data)
};
addRow(student[0])
addRow(student[1])
</script>
</body>
</html>