Javascript-форум - Записать в таблицу значение полей ввода

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Записать в таблицу значение полей ввода (https://javascript.ru/forum/misc/83136-zapisat-v-tablicu-znachenie-polejj-vvoda.html)

Записать в таблицу значение полей ввода

Как добавлять информацию о студентах из полей ввода? После ввода данных в поля и нажатие кнопки, должна добавляться запись о новом студенте а поле ввода очищаться. А данные о студенте заноситься в масив 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());
};

Paulsw01,
надо создать функцию добавления в массив и вывода массива в таблицу, примеров на форуме вагон и маленькая тележка ...
https://javascript.ru/forum/misc/777...tml#post509074

искать To Do List

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