БЛОГ НА HUSL


Фильтрация таблицы на JavaScript

Автор вопроса: sap

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

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

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;

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


Источник

Ответы (3 шт):

Автор решения: Aziz Umarov

Что-то такое хотите?

Поиск по аналогии. Если хотите чтоб чтонибудь появилось то добавляете а если что исчезло то удаляете.

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 () {
  
  document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})
  
  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 () {
 
  document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})
  
  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 () {
 
  document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})
  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 () {

  document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})
  
  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;
 
};
  
<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>

→ Ссылка
Автор решения: sap

прошу прощение не весь js код написал

let student = [
  {
    surname: "Петров",
    name: "Петр",
    patronymic: "Петрович",
    birth: "2001-07-21",
    training: "2000",
    faculty: "Физика",
  },
  {
    surname: "Иванов",
    name: "Иван",
    patronymic: "Иванович",
    birth: "2008-07-22",
    training: "2002",
    faculty: "а",
  },
  {
    surname: "Петров",
    name: "Петр",
    patronymic: "Петрович",
    birth: "2005-07-21",
    training: "2002",
    faculty: "Я",
  },
];

const tableRow = document.querySelectorAll("td");
const alert = document.createElement("div");

const button = document.querySelector(".button");

const inpSurname = document.querySelector(".inp-surname");
const inpName = document.querySelector(".inp-name");
const inpPatronymic = document.querySelector(".inp-patronymic");
const inpBirth = document.querySelector(".inp-birth");
const inpTraining = document.querySelector(".inp-training");
const inpFaculty = document.querySelector(".inp-faculty");

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

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

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

getСourse = (dateStringCorse) => {
  let 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() &&
    document.querySelector(classList).value >= 2000
  ) {
    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()) &&
    Date.parse(document.querySelector(classList).value) >=
      Date.parse("1900-01-01")
  ) {
    return true;
  }
  return false;
}

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

document.querySelector(".button").onclick = function () {
  let data = {
    surname: inpSurname.value,
    name: inpName.value,
    patronymic: inpPatronymic.value,
    birth: inpBirth.value,
    training: inpTraining.value,
    faculty: inpFaculty.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);
    inpSurname.value = "";
    inpName.value = "";
    inpPatronymic.value = "";
    inpBirth.value = "";
    inpTraining.value = "";
    inpFaculty.value = "";
  } else if (checkValidatioString(".inp-surname") == false) {
    button.before(alert);
    alert.innerHTML = "<strong>Введите фамилию</strong>";
  } else if (checkValidatioString(".inp-name") == false) {
    button.before(alert);
    alert.innerHTML = "<strong>Введите имя</strong>";
  } else if (checkValidatioString(".inp-patronymic") == false) {
    button.before(alert);
    alert.innerHTML = "<strong>Введите отчество</strong>";
  } else if (checkValidatioString(".inp-faculty") == false) {
    button.before(alert);
    alert.innerHTML = "<strong>Введите факультет</strong>";
  } else if (checkValidatioString(".inp-training") == false) {
    button.before(alert);
    alert.innerHTML = "<strong>Введите год начала обучения</strong>";
  } else if (checkValidatioString(".inp-birth") == false) {
    button.before(alert);
    alert.innerHTML = "<strong>Введите дату рождения</strong>";
  } else alert("заполние правильно все поля");
};

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

let counter = 0;

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

document.querySelector(".heading__name").onclick = function () {
  let tableRow = document.querySelectorAll(".student");

  tableRow.forEach(function (item) {
    item.remove();
  });

  counter++;

  if (counter % 2) {
    let byName = student.slice(0);
    let nameSort = byName.sort(function (a, b) {
      let min =
        a.surname.toLowerCase() +
        a.name.toLowerCase() +
        a.patronymic.toLowerCase();
      let max =
        b.surname.toLowerCase() +
        b.name.toLowerCase() +
        b.patronymic.toLowerCase();
      return min < max ? -1 : min > max ? 1 : 0;
    });

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

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

document.querySelector(".heading__faculty").onclick = function () {
  let tableRow = document.querySelectorAll(".student");

  tableRow.forEach(function (item) {
    item.remove();
  });

  counter++;

  if (counter % 2) {
    let byFaculty = student.slice(0);
    let facultySort = byFaculty.sort(function (a, b) {
      let min = a.faculty.toLowerCase();
      let max = b.faculty.toLowerCase();
      return min < max ? -1 : min > max ? 1 : 0;
    });

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

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

document.querySelector(".heading__birth").onclick = function () {
  let tableRow = document.querySelectorAll(".student");

  tableRow.forEach(function (item) {
    item.remove();
  });

  counter++;

  if (counter % 2) {
    let byDate = student.slice(0);

    let dateSort = byDate.sort(function (a, b) {
      let max = a.birth;
      let min = b.birth;
      return min < max ? -1 : min > max ? 1 : 0;
      return dateMin - dateMax;
    });
   
    // наполнение таблицы

    for (let i = 0; i < dateSort.length; i++) {
      addRow(dateSort[i]);
    }
  } else {
    for (let i = 0; i < student.length; i++) {
      addRow(student[i]);
    }
  }
};

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

document.querySelector(".heading__training").onclick = function () {
  let tableRow = document.querySelectorAll(".student");

  tableRow.forEach(function (item) {
    item.remove();
  });

  counter++;

  if (counter % 2) {
    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]);
    }
  } else {
    for (let i = 0; i < student.length; i++) {
      addRow(student[i]);
    }
  }
};

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

document.querySelector(".serch-button").onclick = function () {
  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;

  let resultSerch = student.filter(
    (item) =>
      item.name.toLowerCase() == serchName.toLowerCase() ||
      item.surname.toLowerCase() == serchName.toLowerCase() ||
      item.patronymic.toLowerCase() == serchName.toLowerCase() ||
      item.birth == serchBirth ||
      item.training == serchTraining ||
      item.faculty.toLowerCase() == serchFaculty.toLowerCase()
  );
  {
    let tableRowSerch = document.querySelectorAll(".student");
    tableRowSerch.forEach(function (item) {
      item.remove();
    });

    for (let i = 0; i < resultSerch.length; i++) {
     
      addRow(resultSerch[i]);
    }
  }
};
→ Ссылка
Автор решения: sap

В этой части происходит поиск студента из верхней формы, но ищет только по одному параметру

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

document.querySelector(".serch-button").onclick = function () {
  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;

  let resultSerch = student.filter(
    (item) =>
      item.name.toLowerCase() == serchName.toLowerCase() ||
      item.surname.toLowerCase() == serchName.toLowerCase() ||
      item.patronymic.toLowerCase() == serchName.toLowerCase() ||
      item.birth == serchBirth ||
      item.training == serchTraining ||
      item.faculty.toLowerCase() == serchFaculty.toLowerCase()
  );
  {
    let tableRowSerch = document.querySelectorAll(".student");
    tableRowSerch.forEach(function (item) {
      item.remove();
    });

    for (let i = 0; i < resultSerch.length; i++) {
     
      addRow(resultSerch[i]);
    }
  }
};
→ Ссылка

licensed under cc by-sa 3.0 with attribution.