jquery - Cloning of rows and columns from the old table into the new with colSpan and rowSpan -
i using clone jquery. necessary clone gray area in new table. problem cloned rows , columns can has rowspan , colspan.
the gray area intersection data-fix-cols , data-fix-rows.
my solution 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(' + + ')').find('td:gt(' + fix_cols + ')').remove(); }); $('#new-table').html(my_clone); $('#new-table').show(); in example http://jsfiddle.net/djmartini/u8ov43tn/5/
this fiddle contains 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(' + + ')').find('td:lt(' + fix_cols + ')').each(function (j, td) { if (td.colspan > 1 && td.rowspan > 1) { tdsinrow[i] = tdsinrow[i] - (td.colspan - 1) (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) { (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(' + + ')').find('td:gt(' + (tdsinrow[i] - 1) + ')').remove(); } else { my_clone.find('tr:eq(' + + ')').find('td').remove(); } }); $('#new-table').html(my_clone); $('#new-table').show();
Comments
Post a Comment