TomWalbridge,
далее сами ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="container">
<div class="filter__container">
<h2>Показать студентов</h2>
<ul class="filter__list">
<li class="filter__list-item">
<label for="">по ФИО</label>
<input class="filter" type="text" id="inputFio">
</li>
<li class="filter__list-item">
<label for="fac">по факультету</label>
<input class="filter" type="text" id="inputFac">
</li>
<li class="filter__list-item">
<label for="date-start">по году начала обучения </label>
<input class="filter" type="text" id="inputDateStart">
</li>
<li class="filter__list-item">
<label for="date-end">по году окончания обучения</label>
<input class="filter" type="text" id="inputDateEnd">
</li>
</ul>
</div>
<table>
<thead>
<tr>
<th>ФИО</th>
<th>Факультет</th>
<th>Дата рождения</th>
<th>Год обучения</th>
</tr>
</thead>
<tbody id="mytable"></tbody>
</table>
</div>
<script>
const array = [{
sname: 'Сидоров',
fname: 'Иван',
lname: 'Михайлович',
bdate: '23.12.1990',
startlearn: '01.12.2019',
fac: 'Физики'
},
{
sname: 'Сидорова',
fname: 'Ивана',
lname: 'Михайловна',
bdate: '12.11.1994',
startlearn: '24.01.2006',
fac: 'Астрономии'
},
{
sname: 'Сорокина',
fname: 'Мария',
lname: 'Алексеевна',
bdate: '01.01.1992',
startlearn: '11.12.2008',
fac: 'Математики'
},
{
sname: 'Андропов',
fname: 'Александр',
lname: 'Петрович',
bdate: '03.10.1992',
startlearn: '13.12.2003',
fac: 'Информатики'
},
{
sname: 'Никифоров',
fname: 'Олег',
lname: 'Олегович',
bdate: '24.12.1995',
startlearn: '12.12.2004',
fac: 'Химии'
}
]
buildTable(array);
function buildTable(data) {
let table = document.getElementById('mytable');
let html = '';
for (let i = 0; i < data.length; i++) {
let fioObj = data[i].sname + " " + data[i].fname + " " + data[i].lname;
let old = age(data[i].bdate);
let title = titleLearn(data[i].startlearn);
let row = `
<tr>
<td>${fioObj}</td>
<td>${data[i].fac}</td>
<td>${data[i].bdate} (${old})</td>
<td>${title}</td>
<tr/>
`
html += row
}
table.innerHTML = html;
}
document.querySelector('.filter__list').addEventListener("input", function() {
let arr = array.slice(0),
str = '';
if (str = inputFio.value.trim().toLowerCase()) {
arr = arr.filter(({
sname,
fname,
lname
}) => [sname, fname, lname].some(title => title.toLowerCase().includes(str)))
}
if (str = inputFac.value.trim().toLowerCase()) {
arr = arr.filter(({
fac
}) => fac.toLowerCase().includes(str))
}
if (str = inputDateStart.value.trim().toLowerCase()) {
arr = arr.filter(({
startlearn
}) => startlearn.slice(-4) == str)
}
if (str = inputDateEnd.value.trim().toLowerCase()) {
arr = arr.filter(({
startlearn
}) => +startlearn.slice(-4) + 4 == str)
}
buildTable(arr)
})
function age(str) { //возраст кол-во полных лет на текущую дату
let [date, month, year] = str.match(/(\d+)/g);
--month;
let now = new Date;
let nowYear = now.getFullYear(),
nowMonth = now.getMonth(),
nowDate = now.getDate();
return nowYear - year - (0 > (nowMonth - month || nowDate - date))
};
function titleLearn(str) {
let [date, month, year] = str.match(/(\d+)/g);
--month;
let now = new Date;
let nowYear = now.getFullYear(),
nowMonth = now.getMonth(),
nowDate = now.getDate();
let rate = nowYear - year - (0 > (nowMonth - 9 || nowDate - 1)) //1 октября
rate = ++rate > 4 ? 'закончил' : `${rate} курс`
let range = `${year} - ${+year + 4} (${rate})`;
return range;
}
</script>
</body>
</html>