merge tables

by Tim Büthe

HTML

<table>
    <tr>
        <td>
            
            <table id="t1">
                <tr><td>1.1</td></tr>
                <tr><td>1.2</td></tr>
                <tr><td>1.3</td></tr>
            </table>            
            
        </td>
        <td>
            
            <table id="t2">
                <tr><td>2.1</td></tr>
                <tr><td>2.2</td></tr>
                <tr><td>2.3</td></tr>
            </table>            
            
        </td>
        <td>
            
            <table id="t3">
                <tr><td>3.1</td></tr>
                <tr><td>3.2</td></tr>
                <tr><td>3.3<br>sdsd</td></tr>
            </table>            
            
        </td>
    </tr>
</table>

<button id="mergeButton">merge</button>

CSS

#t1 td {
    border: 1px solid green;
}
#t2 td {
    border: 1px solid blue;
}
#t3 td {
    border: 1px solid red;
}

JavaScript

function mergeTables(args) {

    var parameters = $.extend(true, {mode: 'vertical'}, args),
        $tables = $(parameters.selector),
        $firstTable,
        $firstTableRows,
        $firstTableBody;

    //
    if (parameters.mode === 'vertical') {

        $tables.each(function(){

            var $currentTable = $(this);

            if (!$firstTableBody) {
                $firstTableBody = $currentTable.children('tbody');
                return; // continue $tables.each
            }

            $currentTable.find('tbody:first > tr').appendTo($firstTableBody);
            $currentTable.remove();
        });
    } 
    
    //
    else if (parameters.mode === 'horizontal') {
        alert('dd: ' + $tables.length);
        
        // assert same number of rows
        
        $tables.each(function(){

            var $currentTable = $(this),
                $currentTableRows = $currentTable.find('tbody:first > tr');

            if (!$firstTable) {
                $firstTable = $currentTable;
                $firstTableRows = $currentTableRows;
                return; // continue $tables.each
            }

            alert('rows: ' + $currentTableRows.length);
            $currentTableRows.each(function(index){
                
                var $currentRow = $(this),
                    firstTableRow = $firstTableRows.get(index);
                
                alert('currentRow: ' + $currentRow);
                
                $currentRow.children('td').appendTo(firstTableRow);
                
            });
            
            $currentTable.remove();
        });
    } 
    
    //
    else {
        throw "unsupported mode: '" + parameters.mode + "'";
    }
}


$('#mergeButton').on('click', function () {
    mergeTables({
        selector: '#t1, #t2, #t3',
        mode: 'horizontal'
    });
});