When the second column of the table table has the same content, the columns merge and beg.


< 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></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;iPP){ 
            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;
                posPP; 
            }else{ 
                lastValue = value; 
                pos=1; 
                //
                if(i==1){
                    tb.rows[1].cells[0].innerText=1;
                }else{
                    increasePP;
                    tb.rows[i].cells[col-1].innerText= parseInt(tb.rows[1].cells[0].innerText)+parseInt(increase);
                }
            } 
        } 
    }
    </script>
</body>

< / html >

expectation: there is only one China in the second column; China includes Henan, Beijing and Sichuan

Html html5 javascript
Mar.22,2021

demo program 

$(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; iPP) {
                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);
            }
        };
        $("-sharptable 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);
        });
        $("-sharptable tbody tr").remove();
        var str = "";
        for(var i =0; i < countries.length; iPP) {
            var name = countries[i].name;
            var cities = countries[i].cities;
            var len = cities.length;
            for(var j =0 ;j < len; jPP) {
                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>";
                }
            }
        }
        $("-sharptable tbody").append(str);
    });
<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></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;iPP){ 
            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; PPi){
                var row = tb.insertRow(indexPP);
                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];
                }
                
                
            }
            PPstart;
        }
    }
    </script>
</body>

Screenshot 2018-06-29 11.04.14 pm
clipboard.png

in this day and age, it's better to use modern tools such as vue

Previous: After downloading jenkins's war package and putting it into tomcat, what should I do if I log in to the web page and ask for a user name and password?

Next: Ionic project npm install reported an error gyp err! Configure error

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu