table表格第二列相同內(nèi)容時，列合并，跪求

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<body onload="autoRowSpan1(tb,1,1)">
    <table id="tb" border="1">
        <thead>
            <tr>
                <td align="center">序號</td>
                <td>國家</td> 
                <td>地區(qū)</td> 
            </tr>
        </thead>
            <tr>
                <td align="center">1</td>
                <td>中國</td> 
                <td>河南</td> 
            </tr>
            
            <tr>
                <td align="center">3</td>
                <td>中國</td> 
                <td>北京</td> 
            </tr> 
            <tr>
                <td align="center">4</td>
                <td>美國</td> 
                <td>紐約</td> 
            </tr> 
            <tr>
                <td align="center">5</td>
                <td>美國</td> 
                <td>洛杉磯</td> 
            </tr> 
            <tr>
                <td align="center">6</td>
                <td>英國</td> 
                <td>倫敦</td> 
            </tr>
            <tr>
                <td align="center">2</td>
                <td>中國</td> 
                <td>四川</td> 
            </tr> 
    </table>
    <script>
    function autoRowSpan1(tb,row,col) { 
        var lastValue=""; 
        var value=""; 
        var pos=1;
        var increase = 0;
        for(var i=row;i<tb.rows.length;i++){ 
            value = tb.rows[i].cells[col].innerText; 
            if(lastValue == value){ 
                tb.rows[i].deleteCell(col); 
                tb.rows[i-pos].cells[col].rowSpan = tb.rows[i-pos].cells[col].rowSpan+1; 
                //合并序列行
                tb.rows[i].deleteCell(col-1);
                tb.rows[i-pos].cells[col-1].rowSpan = tb.rows[i-pos].cells[col-1].rowSpan+1;
                pos++; 
            }else{ 
                lastValue = value; 
                pos=1; 
                //合并序列行
                if(i==1){
                    tb.rows[1].cells[0].innerText=1;
                }else{
                    increase++;
                    tb.rows[i].cells[col-1].innerText= parseInt(tb.rows[1].cells[0].innerText)+parseInt(increase);
                }
            } 
        } 
    }
    </script>
</body>

</html>
圖片描述

期望：第二列只出現(xiàn)一個中國；中國包含河南，北京，四川這種效果

回答

編輯回答

練命

演示程序

$(document).ready(function () {
        var Country = function (name,cities) {
            this.name = name;
            this.cities = cities;
        };
        var countries = [];
        countries.get = function (name) {
            for(var i = 0; i < this.length; i++) {
                if(this[i].name == name) {
                    return this[i];
                }
            }
            return null;
        };
        countries.add = function (name,city_name) {
            var country = this.get(name);
            if(country) {
                country.cities.push(city_name);
            }  else {
                country = new Country(name,new Array(city_name));
                countries.push(country);
            }
        };
        $("#table tbody tr").each(function () {
            var tds = $(this).find("td");
            var name = tds[1].innerHTML;
            var city_name = tds[2].innerHTML;
            countries.add(name,city_name);
        });
        $("#table tbody tr").remove();
        var str = "";
        for(var i =0; i < countries.length; i++) {
            var name = countries[i].name;
            var cities = countries[i].cities;
            var len = cities.length;
            for(var j =0 ;j < len; j++) {
                if(j == 0) {
                    str += "<tr><td rowspan='"+len+"'>"+(i+1)+"</td><td rowspan='"+len+"'>"+name+"</td><td>"+cities[j]+"</td></tr>";
                } else {
                    str += "<tr><td>"+cities[j]+"</td></tr>";
                }
            }
        }
        $("#table tbody").append(str);
    });

2017年12月4日 13:37

編輯回答

掛念你

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<body onload="autoRowSpan1(tb,1,1)">
    <table id="tb" border="1">
        <thead>
            <tr>
                <td align="center">序號</td>
                <td>國家</td> 
                <td>地區(qū)</td> 
            </tr>
        </thead>
            <tr>
                <td align="center">1</td>
                <td>中國</td> 
                <td>河南</td> 
            </tr>
            
            <tr>
                <td align="center">3</td>
                <td>中國</td> 
                <td>北京</td> 
            </tr> 
            <tr>
                <td align="center">4</td>
                <td>美國</td> 
                <td>紐約</td> 
            </tr> 
            <tr>
                <td align="center">5</td>
                <td>美國</td> 
                <td>洛杉磯</td> 
            </tr> 
            <tr>
                <td align="center">6</td>
                <td>英國</td> 
                <td>倫敦</td> 
            </tr>
            <tr>
                <td align="center">2</td>
                <td>中國</td> 
                <td>四川</td> 
            </tr> 
    </table>
    <script>
    function autoRowSpan1(tb,row,col) { 
        var rows = findSameRows( tb,row,col );
        deleteRows(tb);
        createRows(tb,rows);
    }
    
    function deleteRows(tb){
        for(var i=tb.rows.length-1;i>=1;--i){ 
            tb.deleteRow(i);
        }
    }
    
    function findSameRows(tb,row,col){
        var map = {};
        for(var i=row;i<tb.rows.length;i++){ 
            var value = tb.rows[i].cells[col].innerText; 
            if(value in map){
                map[value].push( tb.rows[i].cells[col+1].innerText );
            }else{
                map[value] =  [tb.rows[i].cells[col+1].innerText];
            }
        }
        return map;
    }
    
    function createRows(tb,rows){
        var start = 1;
        var index = 1;
        for(var key in rows){
            var cols = rows[key];
            var first = true;
            for(var i =0; i < cols.length; ++i){
                var row = tb.insertRow(index++);
                var cell;
                
                if(first){
                    first = false;
                    cell = row.insertCell(0);
                    cell.rowSpan=cols.length;
                    cell.innerHTML = start;
                    
                    
                    cell = row.insertCell(1);
                    cell.rowSpan=cols.length;
                    cell.innerHTML = key;
                    
                    
                    cell = row.insertCell(2);
                    cell.innerHTML = cols[i];
                }else{
                    
                    cell = row.insertCell(0);
                    cell.innerHTML = cols[i];
                }
                
                
            }
            ++start;
        }
    }
    </script>
</body>

屏幕快照 2018-06-29 下午11.04.14

話說這個年代，還是用點vue之類的現(xiàn)代化工具吧

2018年2月22日 06:33