Javascript-форум - Фильтрациятаблицы

1. Как реализовать поиск студента из первой формы по следующим критериям :
ФИО для поиска подстроки в фамилии, имени или отчестве
Факультет для поиска подстроки в названии факультета
Год начала обучения (точное совпадение)
Год окончания обучения (точное совпадение)

2. При клике на заголовки таблицы происходит сортировка студентов, но данные после сортировки выводятся в новых полях при этом старые не удаляются. Как провести сортировку что бы заново выводился список студентов при этом масив не менялся?

<!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">
    <form class="form" >
      <label>Ф.И.О:<input  class="serch-name" type="text"></label>
      <label>дата рождения:<input  class="serch-birth" type="text" type="date" min="01.01.1900"></label><br>
           <label>год начала обучения:<input  class="serch-training" type="text" type="date" min="01.01.2000"></label><br>
      <label>Факультет:<input  class="serch-faculty" type="text" type="text"></label>
    </form>
    <button class="serch-button">Добавить студента</button>
    <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"  required></label>
      <label>Фамилия:<input  class="inp-surname" type="text" type="text" required></label>
      <label>Отчество:<input  class="inp-patronymic" type="text" type="text" required></label><br>
      <label>дата рождения:<input  class="inp-birth" type="date" id="start" name="trip-start" value="2005-07-22" min="01.01.1900"  max="2018-12-31" required></label><br>
      <label>год начала обучения:<input  class="inp-training" type="text" type="number" min="2000" required></label><br>
      <label>Факультет:<input  class="inp-faculty" type="text" type="text" required></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 src="main.js"></script> -->
</body>
  
</html>

let student = [
  {
    surname: "Иванов",
    name: "Иван",
    patronymic: "Иванович",
    birth: "2012",
    training: "2020",
    faculty: "Химия",
  },
  {
    surname: "Петров",
    name: "Ян",
    patronymic: "Петрович",
    birth: "2001",
    training: "2000",
    faculty: "Химия",
  },
  {
    surname: "Петров",
    name: "Петр",
    patronymic: "Петрович",
    birth: "2011",
    training: "2020",
    faculty: "ин",
  },
];

//создаем функцию расчета возраста

getAge = function (dateString) {
  var today = new Date();
  var birthDate = new Date(dateString);
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
};

//создаем функцию расчета лет обучения

getСourse = function (dateStringCorse) {
  var date = new Date();
  return getAge(dateStringCorse) <= 3
    ? getAge(dateStringCorse) + " курс"
    : getAge(dateStringCorse) <= 4 && date.getMonth() <= 7
    ? getAge(dateStringCorse) + " курс"
    : "закончил";
};

// получаем значение из полей ввода

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 + ` ( ${getAge(data.birth)} лет)`;
  row.querySelector(".student__training").innerHTML = `${data.training} - ${
    +data.training + 4
  } (${getСourse(data.training)} )`;
  let tb = document.querySelector("table").tBodies[0].append(row);
};

// валидация формы 
function checkValidatioString(classList) {
  if (/[0-9]/.test(document.querySelector(classList).value) || document.querySelector(classList).value == "") {
    return false;
  }
  return true;
}
dateTuday = new Date()

// валидация формы года обучения
function checkValidatioInt(classList) {
 
  if (/[0-9]/.test(document.querySelector(classList).value) && document.querySelector(classList).value <= dateTuday.getFullYear() ) {
    return true;
  }
  return false;
}
// валидация формы даты
function checkValidatioDate(classList) {
 
  if (/[0-9]/.test(document.querySelector(classList).value) && Date.parse(document.querySelector(classList).value) <= Date.parse(dateTuday.getFullYear()) ) {
    return true;
  }
  return false;
}

//   Заполняем форму

document.querySelector(".button").onclick = function () {
  let data = {
    surname: document.querySelector(".inp-surname").value,
    name: document.querySelector(".inp-name").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,
  };

if (checkValidatioString(".inp-surname") && checkValidatioString(".inp-name") && checkValidatioString(".inp-patronymic") && checkValidatioString(".inp-faculty") && checkValidatioInt(".inp-training") && checkValidatioDate(".inp-birth")) {
 
  addRow(data);
  student.push(data);
} else
alert( "заполние правильно все поля" );
};

addRow(student[0]);
addRow(student[1]);
addRow(student[2]);

  // сортировка по имени

document.querySelector(".heading__name").onclick = function () {
  

  let byName = student.slice(0);
  let nameSort = byName.sort(function (a, b) {
    let x =
      a.surname.toLowerCase() +
      a.name.toLowerCase() +
      a.patronymic.toLowerCase();
    let y =
      b.surname.toLowerCase() +
      b.name.toLowerCase() +
      b.patronymic.toLowerCase();
    return x < y ? -1 : x > y ? 1 : 0;
  });

  console.log("by name:");
  console.log(byName);

  // наполнение таблицы
  for (let i = 0; i < nameSort.length; i++) {
    addRow(nameSort[i]);
  }
};

//сотртировки по факультету

document.querySelector(".heading__faculty").onclick = function () {

  let byFaculty = student.slice(0);
  let facultySort = byFaculty.sort(function (a, b) {
    let x = a.faculty.toLowerCase();
    let y = b.faculty.toLowerCase();
    return x < y ? -1 : x > y ? 1 : 0;
  });

  // наполнение таблицы
  for (let i = 0; i < facultySort.length; i++) {
    addRow(facultySort[i]);
  }
};

//сотртировка по  дате рождения

document.querySelector(".heading__birth").onclick = function () {

  let byDate = student.slice(0);
  let dateSort = byDate.sort(function (a, b) {
    return a.birth - b.birth;
  });
  console.log("by date:");
  console.log(byDate);

  // наполнение таблицы
  for (let i = 0; i < dateSort.length; i++) {
    addRow(dateSort[i]);
  }
};

//сотртировка по  дате начала учебы

document.querySelector(".heading__training").onclick = function () {
  let byTraining = student.slice(0);
  let trainingSort = byTraining.sort(function (a, b) {
    return a.training - b.training;
  });

  // наполнение таблицы
  for (let i = 0; i < trainingSort.length; i++) {
    addRow(trainingSort[i]);
  }
};


// поиск студента

document.querySelector(".serch-button").onclick = function () {
  const serchSurname =  document.querySelector(".serch-surname").value;
  const serchPatronymic = document.querySelector(".serch-patronymic").value;
  const serchName = document.querySelector(".serch-name").value;
  const serchBirth = document.querySelector(".serch-birth").value;
  const serchTraining = document.querySelector(".serch-training").value;
  const serchFaculty = document.querySelector(".serch-faculty").value;

};