Форум

TomWalbridge · #1 (**permalink**) 05.12.2021, 22:28

Всем привет! такой вопрос, у меня есть массив, в нем есть исходные данные, в том числе и дата рождения человека, этот массив вывожу в таблицу, мне надо написать функцию при которой будет вычисление массива и занесение его в таблицу в ячейку рядом с датой рождения(возраст студента), также есть форма добавления нового студента
Внемлю о помощи!!! эта функция 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()

рони · #2 (**permalink**) 05.12.2021, 23:39

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>

TomWalbridge · #3 (**permalink**) 06.12.2021, 06:50

Рони! спасибо тебе огромное, прям выручил, долго я не мог до этого дойти
Не хочу наглеть, но все таки может еще раз подскажешь!
Мне надо вывести годы обучения и номер курса в формате "2019-2023 (2 курс)". Считается, что все студенты учатся 4 года, то есть диапазон с годами обучения выводится как {год начала обучения}-{+4 года}. Если сентябрь года окончания обучения уже прошёл, в скобках вместо указания курса нужно должно выводиться "закончил" и сделать фильтр по году поступлению и году окончания.. я уже несколько недель пытаюсь понять. никак, и не могу наити подсказок нигде

кидаю 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>

рони · #4 (**permalink**) 06.12.2021, 07:59

Сообщение от TomWalbridge

"2019-2023 (2 курс)".

сентябрь прошёл, должен 3 курс начаться)))

TomWalbridge · #5 (**permalink**) 06.12.2021, 08:16

Да, ошибся)

рони · #6 (**permalink**) 06.12.2021, 08:52

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>

ksa · #7 (**permalink**) 06.12.2021, 09:01

Для расчета полных лет можно использовать такой вариант

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)

TomWalbridge · #8 (**permalink**) 06.12.2021, 09:23

Благодарю!!!

рони · #9 (**permalink**) 06.12.2021, 10:33

Сообщение от ksa

new Date(1990, 12, 23)

рони · #10 (**permalink**) 06.12.2021, 10:37

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?

Форум

Справочник

Discord чат

Курсы javascript