jquery 實現(xiàn)table表格動態(tài)合并行？求指教

當(dāng)id相同時，內(nèi)容相同的行，列合并
圖片描述

期望結(jié)果：
圖片描述

<table id="tb" border="1">
            <thead>
                <tr>
                    <td align="center">序號</td>
                    <td>id</td>
                    <td>國家</td> 
                    <td>地區(qū)</td> 
                    <td>顏色</td>
                </tr>
            </thead>
                <tr>
                    <td align="center">1</td>
                    <td>001</td>
                    <td>中國</td> 
                    <td>河南</td> 
                    <td>紅色</td>
                </tr>
                
                <tr>
                    <td align="center">2</td>
                    <td>001</td>
                    <td>中國</td> 
                    <td>北京</td> 
                    <td>紅色</td>
                </tr> 
                <tr>
                    <td align="center">3</td>
                    <td>004</td>
                    <td>中國</td> 
                    <td>四川</td> 
                    <td>紫色</td>
                </tr> 
                <tr>
                    <td align="center">4</td>
                    <td>003</td>
                    <td>美國</td> 
                    <td>紐約</td> 
                    <td>黑色</td>
                </tr> 
                <tr>
                    <td align="center">5</td>
                    <td>003</td>
                    <td>美國</td> 
                    <td>洛杉磯</td> 
                    <td>藍(lán)色</td>
                </tr> 
                <tr>
                    <td align="center">6</td>
                    <td>005</td>
                    <td>英國</td> 
                    <td>倫敦</td> 
                    <td>藍(lán)色</td>
                </tr>
        </table>

回答

編輯回答

涼薄


function initTable() {
    $('tr').each(function() {
        var child = $(this).children('td');
        var id = $(child[1]).text();

        $(child).each(function() {
            $(this).attr('data-field', id + $(this).text());
        });
    });
}

function formatCol($col) {
    var rows = {};
    $col.each(function(index) {
        if (!rows[$(this).attr('data-field')]) {
            rows[$(this).attr('data-field')] = [];
        }
        rows[$(this).attr('data-field')].push($(this));
    });
    for (var id in rows) {
        if (rows[id].length == 1) continue;
        var colCount = rows[id].length;
        var $td = rows[id];
        for (var i = 0; i < colCount; i++) {
            if (i === 0) {
                $td[i].attr('rowspan', colCount);
            } else {
                $td[i].hide();
            }
        }
    }
}

function processTable() {
    initTable();
    var colsLength = $('thead tr:nth-child(1) td').length;
    for (var i = 1; i <= colsLength; i++) {
        var $col = $('tr td:nth-child(' + i + ')');
        formatCol($col);
    }
}

processTable();  //執(zhí)行入口

2017年4月18日 09:22