jquery 实现table表格动态合并行？求指教

Question

当id相同时，内容相同的行，列合并

期望结果：

<table id="tb" border="1">
            <thead>
                <tr>
                    <td align="center">序号</td>
                    <td>id</td>
                    <td>国家</td> 
                    <td>地区</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>蓝色</td>
                </tr> 
                <tr>
                    <td align="center">6</td>
                    <td>005</td>
                    <td>英国</td> 
                    <td>伦敦</td> 
                    <td>蓝色</td>
                </tr>
        </table>

Answer 1

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();  //执行入口