Jquery 从表和Colspan RowSpan克隆行和列

我正在使用jQuery克隆。源表具有类

.provider

，它应该是制作三个表的基础：

#clone head、#clone cols、#clone intersect。

将原始表格（.provider）的前两行[？行]克隆到表格#clone head中

将原始表（.provider）的前两列克隆到表#clone cols中

将两个表（表#克隆头和表#克隆列）的交集克隆到表#克隆交集

这个问题源于克隆细胞是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>

使用者
弗斯特
第二
第三
A1
地下一层
A2
地下二层
A3
地下三层
000
苏济
001
艾希礼
585 794,76
711 436,05
127 248,00
1 289 982,81
002
西蒙娜
489 826,30
591 025,64
1 080 851,94
003
尼基
263 111,43
304 993,43
568 104,86
全部的
37 060 549,32
81 508 922,07
585 794,76
总成本
37 060 549,32
585 794,76
44 455 620,75
127 248,00
81 508 922,07
585 794,76

我的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 */

$.fn.getNonColSpanIndex=函数（）{
if（！$（this.is（'td'）&&！$（this.is（'th'））{
返回-1；
}
var allCells=this.parent（'tr'）.children（）；
var normalIndex=allCells.index（此）；
var nonColSpanIndex=0；
所有单元格。每个（功能（i，项）{
如果（i==normalIndex）
返回false；
var colspan=$（this.attr（'colspan'）；
colspan=colspan？parseInt（colspan）：1；
非colspan指数+=colspan；
});
返回非colspanindex；
};
var$provider=$（'.provider'）；
var fix_rows=$provider.data（'fix-rows'）；
var fix_cols=$provider.data（'fix-cols'）；
固定行--；
修修补补——；
/*克隆头--*/
var clone_header=$provider.find（'tbody'）.clone（）；
clone_header.find（'tr:gt（'+fix_rows+'））.remove（）；
$（'#clone head'）.html（''+clone_header.html（）+''）；
/*--克隆头*/
/*克隆科尔斯--*/
var clone_cols=$provider.find（'tbody'）.clone（）；
var-isRowSpan=0；
克隆查找（'tr'）。每个（函数（i，元素）{
$（元素）。查找（'th，td'）。每个（函数（索引，el）{
如果（isRowSpan>0）{
$（el）.remove（）；
}
如果（el.rowSpan>0）{
isRowSpan=el.rowSpan；
}
如果（$（el）.getNonColSpanIndex（）>修复）{
$（el）.remove（）；
}
});
如果（isRowSpan>0）{
isRowSpan--；
}
});
$（'#clone cols'）.html（''+clone_cols.html（）+''）；
/*——克隆科尔斯*/
/*克隆相交--*/
var clone_intersect=$（“#克隆头”）.find（'tbody'）.clone（）；
clone_intersect.find（'th:gt（'+fix_rows+'）、td:gt（'+fix_rows+'））。remove（）；
$（'#clone intersect'）.html（''+clone#u intersect.html（）+''）；
/*--克隆相交*/

---

我的例子：

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

$.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 */

$.fn.getNonColSpanIndex=函数（）
{
if（！$（this.is（'td'）&&！$（this.is（'th'））
{
返回-1；
}
var allCells=this.parent（'tr'）.children（）；
var normalIndex=allCells.index（此）；
var nonColSpanIndex=0；
所有单元格。每个（功能（i，项）
{
如果（i==normalIndex）
返回false；
var colspan=$（this.attr（'colspan'）；
colspan=colspan？parseInt（colspan）：1；
非colspan指数+=colspan；
});
返回非colspanindex；
};
var$provider=$（'.provider'）；
var fix_rows=$provider.data（'fix-rows'）；
var fix_cols=$provider.data（'fix-cols'）；
固定行--；
修修补补——；
/*克隆头--*/
var clone_header=$provider.find（'tbody'）.clone（）；
clone_header.find（'tr:gt（'+fix_rows+'））.remove（）；
$（'#clone head'）.html（''+clone_header.html（）+''）；
/*--克隆头*/
/*克隆科尔斯--*/
var clone_cols=$provider.clone（）；
columnTh=clone_cols.find（“th:contains（'User'）”）；
columnIndex_start=columnTh.getNonColSpanIndex（）；
columnIndex\u end=columnIndex\u start+parseInt（columnTh.attr（“rowspan”））-1；
第四列添加类别（“保留”）；
clone_cols.find（'tr td'）.filter（函数（）{
var i=$（this）.getNonColSpanIndex（）；
返回i>=columnIndex\u开始和&i columnIndex\u结束；
}).addClass（“keep”）；
clone_intersect.find（'tr'）。每个（函数（i，元素）
{
$（元素）。查找（'th，td'）。每个（函数（索引，el）
{
如果（！$（el）.hasClass（“保留”））
$（el）.remove（）；
});
});
$（'#clone intersect'）.html（''+clone#u intersect.html（）+''）；
/*--克隆相交*/

---

这是工作原理。

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

$.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 */

$.fn.getNonColSpanIndex=函数（）
{
if（！$（this.is（'td'）&&！$（this.is（'th'））
{
返回-1；
}
var allCells=this.parent（'tr'）.children（）；
var normalIndex=allCells.index（此）；
var nonColSpanIndex=0；
所有单元格。每个（功能（i，项）
{
如果（i==normalIndex）
返回false；
var colspan=$（this.attr（'colspan'）；
colspan=colspan？parseInt（colspan）：1；
非colspan指数+=colspan；
});
返回非colspanindex；
};
var$provider=$（'.provider'）；
var fix_rows=$provider.data（'fix-rows'）；
var fix_cols=$provider.data（'fix-cols'）；
固定行--；
修修补补——；
/*克隆头--*/
var clone_header=$provider.find（'tbody'）.clone（）；
clone_header.find（'tr:gt（'+fix_rows+'））.remove（）；
$（'#克隆头'）.html（''+clon'）