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