从表和 Colspan RowSpan 克隆行和列

Question

我正在使用 jQuery 克隆。源表有 .donor 类，它应该是创建三个表的基础：#clone-head, #clone-cols, #clone-intersect.

1. 将原始表 (.donor) 的前两行 [?rows?] 克隆到表中 #clone-head
2. 将原始表 (.donor) 的前两列克隆到表中#clone-cols
3. 将两个表（表#clone-head 和表#clone-cols）的交集克隆到表#clone-intersect 中

问题源于克隆的单元格是属性 colSpan 和 RowSpan；

<table class="donor" data-fix-rows="2" data-fix-cols="2">
<tbody>
    <tr>
        <th colspan="2" rowspan="2">User</th>
        <th colspan="2">First</th>
        <th colspan="2">Second</th>
        <th colspan="2">Third</th>
    </tr>
    <tr>
        <th>A1</th>
        <th>B1</th>
        <th>A2</th>
        <th>B2</th>
        <th>A3</th>
        <th>B3</th>
    </tr>
    <tr>
        <td>000</td>
        <td>Suzy</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr><td>001</td>
        <td>Ashley</td>
        <td></td>
        <td>585 794,76</td>
        <td>711 436,05</td>
        <td>127 248,00</td>
        <td>1 289 982,81</td>
        <td></td>
    </tr>
    <tr><td>002</td>
        <td>Simona</td>
        <td>489 826,30</td>
        <td></td>
        <td>591 025,64</td>
        <td></td>
        <td>1 080 851,94</td>
        <td></td>
    </tr>
    <tr><td>003</td>
        <td>Nicky</td>
        <td>263 111,43</td>
        <td></td>
        <td>304 993,43</td>
        <td></td>
        <td>568 104,86</td>
        <td></td>
    </tr>

    <tr><td colspan="2">Total</td>
        <td>37 060 549,32</td>
        <td></td>
        <td></td>
        <td></td>
        <td>81 508 922,07</td>
        <td>585 794,76</td>
    </tr>
    <tr>
        <td colspan="2">Total Cost</td>
        <td>37 060 549,32</td>
        <td>585 794,76</td>
        <td>44 455 620,75</td>
        <td>127 248,00</td>
        <td>81 508 922,07</td>
        <td>585 794,76</td>
    </tr>
</tbody>
</table>
<div id="clone-head"></div><div id="clone-cols"></div><div id="clone-intersect"></div>

我的 Javascript 代码：

$.fn.getNonColSpanIndex = function() {
    if (!$(this).is('td') && !$(this).is('th')) {
        return -1;
    }

    var allCells = this.parent('tr').children();
    var normalIndex = allCells.index(this);
    var nonColSpanIndex = 0;

    allCells.each(function(i, item) {
        if (i == normalIndex)
            return false;

        var colspan = $(this).attr('colspan');
        colspan = colspan ? parseInt(colspan) : 1;
        nonColSpanIndex += colspan;
    });

    return nonColSpanIndex;
};


var $donor = $('.donor');
var fix_rows = $donor.data('fix-rows');
var fix_cols = $donor.data('fix-cols');

fix_rows--;
fix_cols--;

/* clone head -- */
var clone_header = $donor.find('tbody').clone();
clone_header.find('tr:gt(' + fix_rows + ')').remove();

$('#clone-head').html('<table class="t-header">' + clone_header.html() + '</table>');
/* -- clone head */



/* clone cols -- */
var clone_cols = $donor.find('tbody').clone();
var isRowSpan = 0;
clone_cols.find('tr').each(function(i, element) {
    $(element).find('th,td').each(function(index, el) {
        if (isRowSpan > 0) {
            $(el).remove();
        }
        if (el.rowSpan > 0) {
            isRowSpan = el.rowSpan;
        }
        if ($(el).getNonColSpanIndex() > fix_cols) {
            $(el).remove();
        }
    });

    if (isRowSpan > 0) {
        isRowSpan--;
    }
});

$('#clone-cols').html('<table class="t-cols">' + clone_cols.html() + '</table>');
/* -- clone cols */



/* clone intersect -- */
var clone_intersect = $('#clone-head').find('tbody').clone();
clone_intersect.find('th:gt(' + fix_rows + '),td:gt(' + fix_rows + ')').remove();

$('#clone-intersect').html('<table class="t-intersect">' + clone_intersect.html() + '</table>');
/* -- clone intersect */

我的例子：http://jsfiddle.net/djmartini/qt0qvjLc/1/

Answer 1

我带来了这个解决方案。很确定有一个方法更好的方法来做到这一点。

$.fn.getNonColSpanIndex = function()
{
    if(! $(this).is('td') && ! $(this).is('th'))
    {
        return -1;
    }

    var allCells = this.parent('tr').children();
    var normalIndex = allCells.index(this);
    var nonColSpanIndex = 0;

    allCells.each(function(i, item)
                  {
                      if(i == normalIndex)
                          return false;

                      var colspan = $(this).attr('colspan');
                      colspan = colspan ? parseInt(colspan) : 1;
                      nonColSpanIndex += colspan;
                  });

    return nonColSpanIndex;
};


var $donor = $('.donor');
var fix_rows = $donor.data('fix-rows');
var fix_cols = $donor.data('fix-cols');

fix_rows--;
fix_cols--;

/* clone head -- */
var clone_header = $donor.find('tbody').clone();
clone_header.find('tr:gt(' + fix_rows + ')').remove();

$('#clone-head').html('<table class="t-header">' + clone_header.html() + '</table>');
/* -- clone head */

/* clone cols -- */
var clone_cols = $donor.clone();

columnTh = clone_cols.find("th:contains('User')");
columnIndex_start = columnTh.getNonColSpanIndex();
columnIndex_end = columnIndex_start + parseInt(columnTh.attr("rowspan")) - 1; 

columnTh.addClass("keep");
clone_cols.find('tr td').filter(function(){
    var i = $(this).getNonColSpanIndex();
    return i >= columnIndex_start && i <= columnIndex_end;
}).addClass("keep");

clone_cols.find('tr').each(function(i, element)
{
    $(element).find('th,td').each(function (index, el)
    {
        if(!$(el).hasClass("keep"))
            $(el).remove();
    });
});
$('#clone-cols').html('<table class="t-cols">' + clone_cols.html() + '</table>');
/* -- clone cols */


/* clone intersect -- */
var clone_intersect = $donor.clone();

clone_intersect.find('tr td').filter(function(){
    var i = $(this).getNonColSpanIndex();
    return i > columnIndex_end;
}).addClass("keep");

clone_intersect.find('tr').each(function(i, element)
{
    $(element).find('th,td').each(function (index, el)
    {
        if(!$(el).hasClass("keep"))
            $(el).remove();
    });
});
$('#clone-intersect').html('<table class="t-intersect">' + clone_intersect.html() + '</table>');
/* -- clone intersect */

这是工作的fiddle。