• Вывод данных в HTML в формате не простой таблицы?

    @Vadim1411 Автор вопроса
    Добрый день всем. Совсем забыл об этой теме.... Получилось что-то вроде:

    HTML

    <!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">
        <link rel="stylesheet" href=".\node_modules\bootstrap\dist\css\bootstrap.css">
        <title>Document</title>
    </head>
    <body>
        
        <table class="table table-bordered border-primary"></table>
    
        <script src="node_modules/moment/min/moment.min.js"></script>
        <script src="test.js"></script>
    </body>
    </html>


    JS

    const workers = {
        "welders": [
            {
                "name": "Vadim Sergeevich",
                "dateStart": "2022-01-14",
                "dateEnd": "2022-03-14"
            },
            {
                "name": "Sergey Vladimirovich",
                "dateStart": "2022-01-01",
                "dateEnd": "2022-02-04"
            },
            {
                "name": "Viktoriya",
                "dateStart": "2022-03-02",
                "dateEnd": "2022-04-02"
            },
        ],
        "installers": [
            {
                "name": "Vladimir Petrovich",
                "dateStart": "2022-02-14",
                "dateEnd": "2022-04-14"
            },
            {
                "name": "Petr Georgievich",
                "dateStart": "2022-02-02",
                "dateEnd": "2022-04-02"
            },
        ],
        "storekeeper": [
            {
                "name": "Vladimir Petrovich",
                "dateStart": "2022-02-14",
                "dateEnd": "2022-04-14"
            },
            {
                "name": "Petr Georgievich",
                "dateStart": "2022-02-02",
                "dateEnd": "2022-04-02"
            },
        ],
    };
    
    
    // получаем макс и мин даты
    
    let newMaxDate;
    let newMinDate;
    const maxMinDate = () => {
    
        let dateArr = [];
        for (work in workers) {
            workers[work].forEach(elem => {
                let ds = new Date(elem.dateStart);
                let de = new Date(elem.dateEnd);
                dateArr.push(ds, de);
            });
        };
    
        newMaxDate = new Date(Math.max.apply(null, dateArr));
        newMinDate = new Date(Math.min.apply(null, dateArr));
    
    };
    maxMinDate();
    
    
    // получаем диапазон дат между макс и мин датами
    
    let dateArr = [];
    let dateArrAll = [];
    const rangeDate = () => {
    
        let minDate = moment(newMinDate);
        let maxDate = moment(newMaxDate);
        while (minDate <= maxDate) {
            dateArr.push(minDate.format('DD'));
            dateArrAll.push(minDate.format('YYYY-MM-DD'))
            minDate.add(1, 'days');
        };
    
    };
    rangeDate();
    
    
    // получаем диапазон месяцев между макс и мин датами
    
    let monthArr = [];
    const rangeMonth = () => {
    
        let minDate = moment(newMinDate);
        let maxDate = moment(newMaxDate);
        while (maxDate > minDate || maxDate.format('M') === minDate.format('M')) {
            monthArr.push(minDate.format());
            minDate.add(1, 'month');
        };
    
    };
    rangeMonth();
    
    
    // получаем первые элементы для шапки
    
    let head = []
    const header = () => {
    
        for (key in workers) {
            workers[key].forEach(elem => {
                head.push((Object.keys(elem)));
            })
        };
    
    };
    header();
    let headFirst = head[0];
    
    
    
    // выводим таблицу
    
    const getTable = () =>{
    
        const table = document.querySelector(".table");
    
        for(key in workers){
            let thead = document.createElement("thead");
            let tr = document.createElement("tr");
            let th = document.createElement("th");
            let fragment = document.createDocumentFragment();
    
            th.innerText = key;
            th.style.textAlign = "center";
            th.colSpan = 3;
            fragment.appendChild(th);
    
            monthArr.forEach(elem => {
                let th = document.createElement("th");
                th.style.textAlign = "center";
                let colspan = moment(elem).daysInMonth();
                th.colSpan = colspan;
                th.innerText = moment(elem).format('MMMM');
                fragment.appendChild(th);
            })
    
            tr.appendChild(fragment);
            thead.appendChild(tr);
    
            let tr2 = document.createElement("tr");
            headFirst.forEach(elem => {
                let th2 = document.createElement("th");
                th2.style.textAlign = "center";
                th2.innerText = elem;
                fragment.appendChild(th2);
            })
    
            dateArr.forEach(elem => {
                let th3 = document.createElement("th");
                th3.innerText = elem;
                fragment.appendChild(th3);
            })
    
            tr2.appendChild(fragment);
            thead.appendChild(tr2);
            table.appendChild(thead);
    
            let numArrAll =[];
            let tbody = document.createElement("tbody");
            workers[key].forEach(elem => {
                let tr = document.createElement("tr");
                Object.values(elem).forEach(txt => {
                    let td = document.createElement("td");
                    td.style.whiteSpace = "nowrap";
                    td.innerText = txt;
                    fragment.appendChild(td);
                    tr.appendChild(fragment);
                })
    
                let ds = elem.dateStart;
                let de = elem.dateEnd;
    
                let numArr =[];
                dateArrAll.forEach(cell => {
                    let td = document.createElement("td");
                    td.style.textAlign = "center";
                    if(cell >= ds && cell <= de){
                        td.style.backgroundColor = "#e6e5e3";
                        td.innerText = 1;
                        numArr.push(1);
                        fragment.appendChild(td);
                        tr.appendChild(fragment);
                    }else{
                        td.innerText = '';
                        numArr.push(0);
                        fragment.appendChild(td);
                        tr.appendChild(fragment);
                    }
                })
                tbody.appendChild(tr);
                numArrAll.push(numArr);
    
            })
    
            // ПРОВЕРИТь
    
            // let tr3 = document.createElement("tr");
            // let thQ = document.createElement("th");
            // thQ.innerText = "Quantity";
            // thQ.colSpan = 3;
            // thQ.style.textAlign = "right";
            // fragment.appendChild(thQ);
            // tr3.appendChild(fragment);
            // tbody.appendChild(tr3);
    
            // let col;
            // let row;
            // let summ = numArrAll[0].slice();
            // for(row =1; row < numArrAll.length; row++){
            //     for(col = 0; col < summ.length; col++){
            //         let th = document.createElement("th");
            //         th.innerText = summ[col] +=numArrAll[row][col];
            //         fragment.appendChild(th);
            //         tr3.appendChild(fragment);
            //     };
            // };
    
    
            table.appendChild(tbody);
    
            let tr4 = document.createElement("tr");
            tr4.style.height = "30px";
            tr4.appendChild(fragment);
            tbody.appendChild(tr4);
            
        };
        
    };
    
    getTable();


    Для более менее корректного отображения подключил bootstrap. Для работы с датами использовал moment.js. Спасибо всем за советы. Очень помогли. Получилось в принципе то что и хотел, но не доработал вывод поля "Quantity", которое отображает общую численность сотрудников определенной должности на каждую дату (комментарий ПРОВЕРИТЬ). Может конечно написано и не совсем красиво, но какой-никакой результат.
    Ответ написан
    Комментировать