jquery - 使用 jQuery 在多个单元格中拆分行跨单元格

Question

假设我在 Wikipedia Table 中有一个带有 rowspan的表格，我想将一个 rowspan 单元格拆分为下面的多个单元格，并填充 rowspanned 单元格中的值。

在链接表中，它将产生 10 个新的 TD，其中包含“Filemaker, inc.”。作为价值观。

由于表是从自上而下从左到右创建的，我如何使用 jQuery 来完成此操作？

Answer 1

在此处查看 jsFiddle：http: //jsfiddle.net/9PZQj/3/

但这仅限于价值rowspan="2"，但您可以根据需要扩展解决方案。

Answer 2

我扩展了@vendettamit 的答案以支持rowspan. 它也分裂colspan了。我修复了其中的一个错误。 http://jsfiddle.net/tcvax28d/38/

编辑 - 作为堆栈片段

 function split_rows(tbl_param){
        var tbl = $(tbl_param);
        var tempTable = tbl.clone(true);
    var tableBody = $(tempTable).children();
    $(tableBody).children().each(function(index , item){
        var currentRow = item;
        $(currentRow).children().each(function(index1, item1){
                var rows = $(item1).attr("rowspan");
            if(rows>=2)
            {
                // copy the cell
                var item2 = $(item1).clone(true);
                // Remove rowspan
                $(item1).removeAttr("rowspan");
                $(item2).attr("rowspan",(rows)-1);
                //console.log("item1:",$(item1).text(),", index:",index1);
                // last item's index in next row
                var indexOfLastElement = $(currentRow).next().children().last().index();
                if(indexOfLastElement < index1)
                {
                     $(currentRow).next().append(item2)
                }
                else
                {
                    // intermediate cell insertion
                    $(item2).insertBefore($(currentRow).next().children().eq(index1));
                }
            }
        });
        
    });
        return tempTable;
}
 function split_cols(tbl_param){
        var tbl = $(tbl_param);
        var tempTable = tbl.clone(true);
    var tableBody = $(tempTable).children();
    $(tableBody).children().each(function(index , item){
        var currentRow = item;
        for (var i=0; i<$(currentRow).children().length;i++){
            var item1 = $(currentRow).children().eq(i);
                var cols = $(item1).attr("colspan");
                if(cols>=2)
                {
                    // copy the cell
                    var item2 = $(item1).clone(true);
                    
                    // Remove rowspan
                    $(item1).removeAttr("colspan");
                    $(item2).attr("colspan", cols-1);
                    // last item's index in next row
                    $(item2).insertAfter(item1);
                }
            
        }
        
    });
        return tempTable;
}
function split_tbl(tbl_param){
        var tbl = split_cols(tbl_param);
        tbl = split_rows(tbl);
        return tbl;
}
const res1 = split_tbl($('#tbl'));
$('#test').append(res1);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl" border = "1">
    <tr>
        <td>Q</td>
        <td>A</td>
        <td>B</td>
        <td>O</td>
        <td rowspan="2">C</td>
    </tr>
    <tr>
        <td colspan="2">D</td>
       
        <td rowspan="2">E</td>
        <td>U</td>
    </tr>
    <tr>
        <td>R</td>
        <td>F</td>
        <td>G</td>
        <td>U</td>
    </tr>
    <tr>
        <td>S</td>
        <td>H</td>
        <td>V</td>
        <td rowspan="3" colspan="2">I</td>
    </tr>
    <tr>
        <td>T</td>
        <td>K</td>
        <td>W</td>
    </tr>
    <tr>
        <td colspan="3">M</td>
    </tr>
</table>
<br>
<div id="test"> </div>