我正在使用克隆 jQuery。有必要在新表中克隆灰色区域。 问题是克隆的行和列可以有 rowSpan 和 colSpan。
灰色区域是 data-fix-cols 和 data-fix-rows 的交集。
我的解决方案不起作用:
<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 代码:
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();
最佳答案
这个 fiddle 包含您所需的答案 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();
关于jquery - 使用 colSpan 和 rowSpan 将旧表中的行和列克隆到新表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31047994/