【前端】合并2个表格数据

阅读数: 2023-10-20

前言

有的时候我们需要将粘贴板内存在的表格复制粘贴到已有的表格中，此时需要合并而不是简单插入表格单元格内部

实现

// 将tableB合并到tableA的起始位置(x,y)之中
function mergeTable(tableA, tableB, {x = 0, y = 0}) {
    const $tableA = $(tableA).clone(), $tableB = $(tableB).clone();
    let $trsA = $tableA.find('>*>tr, >tr');
    const $trsB = $tableB.find('>*>tr, >tr');
    const tableHeightA = $trsA.length, tableHeightB = $trsB.length;
    let tableWidthA = 0, tableWidthB = 0;
    $.each($trsA, (i, tr) => { tableWidthA = Math.max($(tr).find('>td, >th').length, tableWidthA) });
    $.each($trsB, (i, tr) => { tableWidthB = Math.max($(tr).find('>td, >th').length, tableWidthB) });

    // fill tableA and tableB with the same number of tr/td
    const xNum = tableWidthB - tableWidthA + x, yNum = tableHeightB - tableHeightA + y;
    xNum > 0 && $.each($trsA, (i, tr) => { $(tr).append($('<td>'.repeat(xNum))) }); // 差 xNum 个td
    yNum > 0 && $trsA.parent().append($(`<tr>${'<td>'.repeat(tableWidthB + x)}</tr>`.repeat(yNum))) && ($trsA = $tableA.find('>*>tr, >tr')); // 差 yNum 个tr

    // replace td in tableA with tableB, unless border style
    $.each($trsB, i => {
        const $tdsA = $($trsA[i + y]).find('>td, >th');
        const $tdsB = $($trsB[i]).find('>td, >th');
        $.each($tdsB, j => {
            const $tdA = $($tdsA[j + x]);
            const $tdB = $($tdsB[j]);
            $tdB.css('border', $tdA.css('border'));
            $tdA.replaceWith($tdB);
        })
    })

    // fill td in tableA, fixup irregular table cause by colspan and rowspan
    const $trs = $tableA.find('>*>tr, >tr');
    let maxCol = 0;
    $.each($trs, (i, tr) => {
        const $tr = $(tr);
        const $tds = $tr.find('>td, >th');
        let col = parseInt($tr.attr('data-col')) || 0;
        $.each($tds, (j, td) => {
            const rowspan = parseInt($(td).attr('rowspan')) || 0;
            const colspan = parseInt($(td).attr('colspan')) || 1;
            col += colspan;
            for (let t = 1; t < rowspan; t++) {
                const dataCol = parseInt($trs[i + t].attr('data-col')) || 0;
                $trs[i + t].attr('data-col', dataCol + 1);
            }
        })
        $tr.attr('data-col', col); // 遍历完成后再次记录当前的col给下面填充用
        maxCol = Math.max(maxCol, col);
    });
    $.each($trs, (i, tr) => {
        const $tr = $(tr);
        const col = parseInt($tr.attr('data-col')) || 0;
        col && col < maxCol && $tr.append($('<td>'.repeat(maxCol - col)));
        $tr.removeAttr('data-col');
    });
    return $tableA;
}

// 获取单元格在表格中的位置
function getPos($td) {
    let x = 0, y = 0;
    const $tr = $($td.closest('tr'));
    const $table = $($td.closest('table'));
    $.each($table.find('>*>tr, >tr'), (i, tr) => {
        $(tr).is($tr) && (y = i);
        $.each($(tr).find('>td, >th'), (j, td) => {
            $(td).is($td) && (x = j);
        })
    })
    return {x, y}
}

const position = getPos(tableA.querySelector('td'));
const $mergedTable = mergeTable(tableA, tableB, position);
closestTable.replaceWith($mergedTable);

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/f3a90eab.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！