Помогите решить задачу!
Всем привет! такой вопрос, у меня есть массив, в нем есть исходные данные, в том числе и дата рождения человека, этот массив вывожу в таблицу, мне надо написать функцию при которой будет вычисление массива и занесение его в таблицу в ячейку рядом с датой рождения(возраст студента), также есть форма добавления нового студента
Внемлю о помощи!!! эта функция function age()
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 row = `
<tr>
<td>${fioObj}</td>
<td>${data[i].fac}</td>
<td>${data[i].startlearn}</td>
<td>${data[i].bdate}</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() {
let today = new Date();
let dateOfBirthday = new Date(array.bdate);
//Возраст = текущий год - год рождения
let age = today.getFullYear() - dateOfBirthday.getFullYear();
// Если ДР в этом году ещё предстоит, то вычитаем из age один год
console.log(age)
}
age()
|
возраст количество полных лет на текущую дату
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>
|
Рони! спасибо тебе огромное, прям выручил, долго я не мог до этого дойти
Не хочу наглеть, но все таки может еще раз подскажешь! Мне надо вывести годы обучения и номер курса в формате "2019-2023 (2 курс)". Считается, что все студенты учатся 4 года, то есть диапазон с годами обучения выводится как {год начала обучения}-{+4 года}. Если сентябрь года окончания обучения уже прошёл, в скобках вместо указания курса нужно должно выводиться "закончил" и сделать фильтр по году поступлению и году окончания.. я уже несколько недель пытаюсь понять. никак, и не могу наити подсказок нигде :help: кидаю html
<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>
<form class="form">
<h2> Добавить студента</h2>
<ul class="list">
<li><label for="student__name">Имя</label>
<input class="student" id="student__name" type="text"></li>
<li><label for="student__sname">Фамилия</label>
<input class="student" id="student__sname" type="text"></li>
<li><label for="student__lname">Отчетство</label>
<input class="student" id="student__lname" type="text"></li>
<li><label for="student__bdate">Дата рождения</label>
<input class="student" id="student__bdate" type="date"></li>
<li><label for="student__startLearn">Год начала обучения</label>
<input class="student" id="student__startLearn" type="text"></li>
<li><label for="student__faculty">Факультет</label>
<input class="student" id="student__faculty" type="text"></li>
<button onclick="onAddStudent()" type="button" class="btn-add">Добавить судента</button>
</ul>
</form>
<table>
<thead>
<tr>
<th>ФИО</th>
<th>Факультет</th>
<th>Дата рождения</th>
<th>Год обучения</th>
</tr>
</thead>
<tbody id="mytable"></tbody>
</table>
</div>
</body>
|
Цитата:
|
Да, ошибся)
|
поиск по массиву данных
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>
|
Для расчета полных лет можно использовать такой вариант
const d1 = (new Date(1990, 12, 23)).toISOString().replace(/-/g, '') const d2 = (new Date()).toISOString().replace(/-/g, '') const age = Math.trunc((parseInt(d2) - parseInt(d1)) / 10000) alert(age) |
Благодарю!!!:thanks:
|
Цитата:
|
ksa,
сегодня ещё 6 число const d1 = (new Date(1990, 11, 7)).toISOString().replace(/-/g, '') const d2 = (new Date()).toISOString().replace(/-/g, '') const age = Math.trunc((parseInt(d2) - parseInt(d1)) / 10000) alert(age) // 31? |
Цитата:
Не сомневайтесь. :) Эта "формула" расчета возраста уже проверена годами эксплуатации на гос. предприятиях. Правда на другом ЯП... |
Цитата:
|
рони, вот смотри какая дата у тебя получается
const d1 = (new Date(1990, 11, 7)).toISOString().replace(/-/g, '') const d2 = (new Date()).toISOString().replace(/-/g, '') alert(d2 + '-' + d1) alert(parseInt(d2) + '-' + parseInt(d1)) const age = Math.trunc((parseInt(d2) - parseInt(d1)) / 10000) alert(age) // 31? Т.е. как раз его день рождения |
рони, там временная зона "сыграла" свою роль...
Но это уже особенность JS и его "дата образования". :-? К самой "формуле" расчета это не имеет отношения. :no: Она правильно посчитает если даты будут правильные. const d1 =19901207 const d2 = 20211206 const age = Math.trunc((d2 - d1) / 10000) alert(age) |
ksa,
ок))) формула интересная. |
Ребята, есть еще такой вопрос, по это же задаче.. я написал функцию сортировки для даты--sortColumn--, при клике на шапку таблицы, пытался назначить ее на фио и факультет, но не работает, может есть варианты повторно ее использовать, только на остальные колонки
<!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="css/style.css">
</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>
<form class="form">
<h2> Добавить студента</h2>
<ul class="list">
<li><label for="student__name">Имя</label>
<input class="student" id="student__name" type="text"></li>
<li><label for="student__sname">Фамилия</label>
<input class="student" id="student__sname" type="text"></li>
<li><label for="student__lname">Отчетство</label>
<input class="student" id="student__lname" type="text"></li>
<li><label for="student__bdate">Дата рождения</label>
<input class="student" id="student__bdate" type="date"></li>
<li><label for="student__startLearn">Год начала обучения</label>
<input class="student" id="student__startLearn" type="text"></li>
<li><label for="student__faculty">Факультет</label>
<input class="student" id="student__faculty" type="text"></li>
<button onclick="onAddStudent()" type="button" class="btn-add">Добавить судента</button>
</ul>
</form>
<table>
<thead>
<tr>
<th onclick="sortColumn('fioObj')">ФИО</th>
<th>Факультет</th>
<th>Дата рождения</th>
<th onclick="sortColumn('startlearn')">Год обучения</th>
</tr>
</thead>
<tbody id="mytable"></tbody>
</table>
</div>
<script>
let sortDirections = {}
const dateLimit = '2000';
let array = [
{ sname: 'Сидоров', fname: 'Иван', lname: 'Михайлович', bdate: '23.12.1990', startlearn: '2005', fac: 'Физики' },
{ sname: 'Сидорова', fname: 'Ивана', lname: 'Михайловна', bdate: '12.11.1994', startlearn: '2019', fac: 'Астрономии' },
{ sname: 'Сорокина', fname: 'Мария', lname: 'Алексеевна', bdate: '01.01.1992', startlearn: '2008', fac: 'Математики' },
{ sname: 'Андропов', fname: 'Александр', lname: 'Петрович', bdate: '3.10.1992', startlearn: '2003', fac: 'Информатики' },
{ sname: 'Никифоров', fname: 'Олег', lname: 'Олегович', bdate: '24.12.1995', startlearn: '2021', fac: 'Химии' }
]
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))
};
function buildTable(data) {
let table = document.getElementById('mytable')
table.innerHTML = '';
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
}
function sortColumn(columnName) {
const dataType = !Number.isNaN(+array[0][columnName]) ? "number" : "string"
if (!sortDirections[columnName]) {
sortDirections[columnName] = false
}
sortDirections[columnName] = !sortDirections[columnName];
switch (dataType) {
case 'number':
sortNumberColumn(sortDirections[columnName], columnName);
break;
case 'string':
sortNumberColumn(sortDirections[columnName], columnName);
break;
}
buildTable(array)
}
function sortNumberColumn(sort, columnName) {
array = array.sort((p1, p2) => {
return sort ? p1[columnName] - p2[columnName] : p2[columnName] - p1[columnName]
})
}
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;
if (inputStudentStLearn.trim().toLowerCase() <= dateLimit) {
alert('is not a correct date')
return
}
let newStudent = {
fname: inputStudentName,
sname: inputStudentSName,
lname: inputStudentLName,
bdate: inputStudentBDate,
startlearn: inputStudentStLearn,
fac: inputStudentFac,
}
console.log(newStudent);
array.push(newStudent);
buildTable(array);
}
function titleLearn(str) {
let endYear = +str + 4;
let now = new Date;
let grade = now.getFullYear() - str;
let output
if (grade > 4) {
output = `${str}-${endYear} (закончил)`
} else {
output = `${str}-${endYear} (${grade} курс)`
}
return output
}
document.querySelector('.filter__list').addEventListener("input", function() {
let arr = array.slice(0),
str = '';
if (inputFio.value.trim().toLowerCase()) {
let str = inputFio.value.trim().toLowerCase()
arr = arr.filter(({
sname,
fname,
lname
}) => [sname, fname, lname].some(title => title.toLowerCase().includes(str)))
}
if (inputFac.value.trim().toLowerCase()) {
let str = inputFac.value.trim().toLowerCase()
arr = arr.filter(({
fac
}) => fac.toLowerCase().includes(str))
}
if (inputDateStart.value.trim().toLowerCase()) {
let str = inputDateStart.value.trim().toLowerCase()
arr = arr.filter(({
startlearn
}) => startlearn.slice(-4) == str)
}
if (inputDateEnd.value.trim().toLowerCase()) {
let str = inputDateEnd.value.trim().toLowerCase()
arr = arr.filter(({
startlearn
}) => +startlearn.slice(-4) + 4 == str)
}
buildTable(arr)
})
</script>
</body>
</html>
|
TomWalbridge,
https://javascript.ru/forum/misc/777...tml#post509074 |
Спасибо!
|
Может ли кто может расшифровать, а именно объяснить мне значение -- $(this).data--запись в jquery в js!?
$('th').on('click', function(){
var column = $(this).data('column')
var order = $(this).data('order')
var text = $(this).html()
text = text.substring(0, text.length - 1)
|
var myArray = [
{'name':'Michael', 'age':'30', 'birthdate':'11/10/1989'},
{'name':'Mila', 'age':'32', 'birthdate':'10/1/1989'},
{'name':'Paul', 'age':'29', 'birthdate':'10/14/1990'},
{'name':'Dennis', 'age':'25', 'birthdate':'11/29/1993'},
{'name':'Tim', 'age':'27', 'birthdate':'3/12/1991'},
{'name':'Erik', 'age':'24', 'birthdate':'10/31/1995'},
]
$('th').on('click', function(){
var column = $(this).data('column')
var order = $(this).data('order')
var text = $(this).html()
text = text.substring(0, text.length - 1)
if(order == 'desc'){
$(this).data('order', "asc")
myArray = myArray.sort((a,b) => a[column] > b[column] ? 1 : -1)
text += '▼'
}else{
$(this).data('order', "desc")
myArray = myArray.sort((a,b) => a[column] < b[column] ? 1 : -1)
text += '▲'
}
$(this).html(text)
buildTable(myArray)
})
buildTable(myArray)
function buildTable(data){
var table = document.getElementById('myTable')
table.innerHTML = ''
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td>${data[i].name}</td>
<td>${data[i].age}</td>
<td>${data[i].birthdate}</td>
</tr>`
table.innerHTML += row
}
}
|
Цитата:
|
| Часовой пояс GMT +3, время: 11:01. |