table2grid

jQuery плагин для конвертации HTML таблиц в сетку на div-ах

by Yunus Gaziev

HTML

<table style="width:100%" data-table-crash="1,2" data-table-uid="uniqID">
    <caption>Таблица с горизотальным построением элементов</caption>
    <tbody>
        <tr>
            <td>
                <img src="https://picsum.photos/100.webp">
            </td>
            <td>
                <span>Lorem ipsum dolor.</span>
            </td>
            <td>
                <img src="https://picsum.photos/100.webp">
            </td>
            <td><span>Lorem ipsum dolor sit amet.</span></td>
            <td>
                <img src="https://picsum.photos/100.webp">
            </td>
            <td><span>Lorem ipsum dolor sit.</span></td>
        </tr>
        <tr>
            <td>
                <img src="https://picsum.photos/100.webp">
            </td>
            <td>
                <span>Lorem ipsum dolor.</span>
            </td>
            <td>
                <img src="https://picsum.photos/100.webp">
            </td>
            <td><span>Lorem ipsum dolor sit amet.</span></td>
            <td>
                <img src="https://picsum.photos/100.webp">
            </td>
            <td><span>Lorem ipsum dolor sit.</span></td>
        </tr>
    </tbody>
</table>
<br>
<hr>
<br>
<table style="width:100%" data-table-crash="2" data-table-uid="up-movie">
    <caption>Таблица с вертикальным построением элементов</caption>
    <tbody>
        <tr>
            <td>
                <img src="https://picsum.photos/100.webp">
            </td>
            <td>
                <img src="https://picsum.photos/100.webp">
            </td>
            <td>
                <img src="https://picsum.photos/100.webp">
            </td>
        </tr>
        <tr>
            <td><span>Lorem ipsum dolor.</span></td>
            <td><span>Lorem ipsum dolor sit amet.</span></td>
            <td><span>Lorem ipsum dolor sit.</span></td>
        </tr>
        <tr>
            <td>
                <img src="https://picsum.photos/100.webp">
            </td>
           ...

SCSS

body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

table {
    
    caption {
        font-style: italic;
        padding: 5px;
    }
    
    td {
        padding: 5px;
    }
}

.table2grid {
    
    &__list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 20px 0 0 -10px;
        padding: 0;
        box-sizing: border-box;
    }
    
    &__item {
        padding: 0 0 20px 10px;
        box-sizing: border-box;
    }
    
    @for $i from 1 through 10 {

        &--#{$i} {

            .table2grid__item {
                max-width: (100/$i)*1% !important;
                flex: 0 0 (100/$i)*1% !important;
            }

        }
    }
    
    &--horizontal {
    
        .table2grid {
            
            &__item {
                display: flex;
                flex-direction: row;
                align-items: center;
            }
        }
        
        .table2grid-block {
            padding: 5px;
        }
        
    }
}

JavaScript

;(function($) {

    $.table2grid = function(selector) {

        var $tables       = $(selector);
        var aTables       = [];
        var iterator      = 0;
        var elResultIndex = 0;
        var delimiter     = true;

        var classes = {
            main         : 'table2grid',
            list         : 'table2grid__list',
            item         : 'table2grid__item',
            block        : 'table2grid-block',
            blockContent : 'table2grid-block__content'
        };

        $.each($tables, function(tableIndex, table) {

            var aCrashParams = $(table).data('tableCrash').toString().split(',');
            var uID          = $(table).data('tableUid');

            aTables[tableIndex] = {};
            aTables[tableIndex].colsCount = $(table).find('tr:first-child td').length;
            aTables[tableIndex].rowsInElement = aCrashParams[0];
            aTables[tableIndex].elements = [];

            iterator = 0;

            $.each($(table).find('tr'), function(trIndex, trContent) {

                iterator++;

                delimiter = iterator % aTables[tableIndex].rowsInElement;

                $.each($(trContent).find('td'), function(tdIndex, tdContent) {

                    //console.log(elResultIndex);

                    if (typeof aTables[tableIndex].elements[elResultIndex] === 'undefined') {
                        aTables[tableIndex].elements[elResultIndex] = $('<div class=' + classes.block + '></div>');
                    }

                    aTables[tableIndex].elements[elResultIndex].append($('<div class="' + classes.blockContent + '">' + $(tdContent).html() + '</div>'));

                    elResultIndex++;

                    if (delimiter && tdIndex == (aTables[tableIndex].colsCount - 1)) {
                        //console.info('end row');
                        elResultIndex = elResultIndex - aTables[tableIndex].colsCount;
                    }

                });

                if (!delimiter)...