TomWalbridge,
делайте полноценный макет...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<table id="mytable"></table>
<script>
const array = [
{ sname: 'Сидоров', fname: 'Иван', lname: 'Михайлович', bdate: '23.12.1990', startlearn: '12.12.2005', 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: '3.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')
table.innerHTML = ''
for (let i = 0; i < data.length; i++) {
let fioObj = data[i].sname + "\n" + data[i].fname + "\n" + data[i].lname;;
let old = age(data[i].bdate);
let row = `
<tr>
<td>${fioObj}</td>
<td>${data[i].fac}</td>
<td>${data[i].startlearn}</td>
<td>${data[i].bdate}</td>
<td>${old}</td>
<tr/>
`
table.innerHTML += row
}
}
/*document.getElementById("inputFac").addEventListener('keyup', function() {
let value = document.getElementById('inputFac').value
console.log(value)
let data = tableSearch(value, array)
buildTable(data)
})*/
function tableSearch(value, data) {
let filterData = []
for (let i = 0; i < data.length; i++) {
value = value.toLowerCase()
let name = data[i].fac.toLowerCase()
if (name.includes(value)) {
filterData.push(data[i])
}
}
return filterData
}
/*document.getElementById("inputFio").addEventListener('keyup', function() {
let value = document.getElementById('inputFio').value
console.log(value)
let data = tableSearch(value, array)
buildTable(data)
})*/
function tableSearch(value, data) {
let filterData = []
for (let i = 0; i < data.length; i++) {
value = value.toLowerCase()
let name = data[i].fname.toLowerCase()
if (name.includes(value)) {
filterData.push(data[i])
}
}
return filterData
}
function onAddStudent() {
const inputStudentName = document.getElementById('student__name').value;
const inputStudentSName = document.getElementById('student__sname').value;
const inputStudentLName = document.getElementById('student__lname').value;
const inputStudentBDate = document.getElementById('student__bdate').value;
const inputStudentStLearn = document.getElementById('student__startLearn').value;
const inputStudentFac = document.getElementById('student__faculty').value;
let input = {
fname: inputStudentName,
sname: inputStudentSName,
lname: inputStudentLName,
bdate: inputStudentBDate,
startlearn: inputStudentStLearn,
fac: inputStudentFac,
}
console.log(input);
array.push(input);
buildTable(array);
}
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))
};
</script>
</body>
</html>