Question

假设我在维基百科Table with rowspan中有一个表，我想将一个行跨单元格拆分成下面的多个单元格，并填充行数单元格中的值。

在链接表中，它将产生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>

使用jQuery在多个单元格中拆分rowspan单元格

2 个答案: