Cloning of rows and columns from the old table into the new with colSpan and rowSpan

Question

I am using clone jQuery. It is necessary to clone a gray area in the new table. The problem is that the cloned rows and columns can has rowSpan and colSpan.

The gray area is the intersection data-fix-cols and data-fix-rows.

My solution does not work:

<table id="old-table" data-fix-cols='3' data-fix-rows='4'>
    <tbody>
        <tr>
            <td class="gray">CLONE ME</td>
            <td colspan="2" rowspan="2" class="gray">CLONE ME</td>
            <td>Ashgabat</td>
            <td>Barcelona</td>
            <td>Berlin</td>
        </tr>
        <tr>
            <td rowspan="3" class="gray">CLONE ME</td>
            <td>Bucharest</td>
            <td>Warsaw</td>
            <td>Washington</td>
        </tr>
        <tr>
            <td class="gray">CLONE ME</td>
            <td class="gray">CLONE ME</td>
            <td>Hamburg</td>
            <td>Guatemala</td>
            <td>Dakar</td>
        </tr>
        <tr>
            <td class="gray">CLONE ME</td>
            <td class="gray">CLONE ME</td>
            <td>Dresden</td>
            <td>Dublin</td>
            <td>Geneva</td>
        </tr>
        <tr>
            <td>Zagreb</td>
            <td>Kinshasa</td>
            <td>Kishinev</td>
            <td>Krakow</td>
            <td>Lima</td>
            <td>Lisbon</td>
        </tr>
        <tr>
            <td>London</td>
            <td>Los Angeles</td>
            <td>Luxembourg</td>
            <td>Madrid</td>
            <td>Manila</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td>Milan</td>
            <td>Montreal</td>
            <td>Mumbai</td>
            <td>Nairobi</td>
            <td>Nicosia</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Osaka</td>
            <td>Oslo</td>
            <td>Ottawa</td>
            <td>Paris</td>
            <td>Prague</td>
            <td>Riga</td>
        </tr>
        <tr>
            <td>Rome</td>
            <td>Rotterdam</td>
            <td>Salvador</td>
            <td>Samarkand</td>
            <td>Sydney</td>
            <td>Singapore</td>
        </tr>
        <tr>
            <td>Sofia</td>
            <td>Istanbul</td>
            <td>Taipei</td>
            <td>Tbilisi</td>
            <td>Zurich</td>
            <td>Chicago</td>
        </tr>
    </tbody>
</table>
<table id="new-table"></table>

JavaScript code:

var old_table = $("#old-table");
var my_clone = $('#old-table tbody').clone();
var fix_cols = old_table.data('fix-cols');
var fix_rows = old_table.data('fix-rows');

fix_cols--;
fix_rows--;

my_clone.find('tr:gt(' + fix_rows + ')').remove();
my_clone.find('tr').each(function(i,e)
{
    my_clone.find('tr:eq(' + i + ')').find('td:gt(' + fix_cols + ')').remove();
});

$('#new-table').html(my_clone);
$('#new-table').show();

In example http://jsfiddle.net/djmartini/u8ov43tn/5/

Answer 1

This fiddle contains your required answer http://jsfiddle.net/u8ov43tn/13/

var old_table = $("#old-table");
var my_clone = $('#old-table tbody').clone();
var fix_cols = old_table.data('fix-cols');
var fix_rows = old_table.data('fix-rows');

//fix_cols--;
fix_rows--;
var tDsInRow = [];
my_clone.find('tr:gt(' + fix_rows + ')').remove();
my_clone.find('tr').each(function (i, e) {
    if (typeof tDsInRow[i] == "undefined") {
        tDsInRow[i] = fix_cols;
    }

    my_clone.find('tr:eq(' + i + ')').find('td:lt(' + fix_cols + ')').each(function (j, td) {

        if (td.colSpan > 1 && td.rowSpan > 1) {
            tDsInRow[i] = tDsInRow[i] - (td.colSpan - 1)
            for (var j = 1; j < td.rowSpan; j++) {
                if (typeof tDsInRow[i + j] == "undefined") {
                    tDsInRow[i + 1] = fix_cols;
                }

                tDsInRow[i + j] = tDsInRow[i + j] - (td.colSpan)
            }
        } else if (td.colSpan > 1) {
            tDsInRow[i] = tDsInRow[i] - (td.colSpan - 1)
        } else if (td.rowSpan > 1) {
            for (var j = 1; j < td.rowSpan; j++) {
                if (typeof tDsInRow[i + j] == "undefined") {
                    tDsInRow[i + j] = fix_cols;
                }

                tDsInRow[i + j] = tDsInRow[i + j] - (td.colSpan)
            }
        }
    });
});

my_clone.find('tr').each(function (i, e) {
    if (tDsInRow[i] > 0) {
        my_clone.find('tr:eq(' + i + ')').find('td:gt(' + (tDsInRow[i] - 1) + ')').remove();
    } else {
        my_clone.find('tr:eq(' + i + ')').find('td').remove();
    }
});

$('#new-table').html(my_clone);

$('#new-table').show();