table表格第二列相同内容时，列合并，跪求

发布于
2018-06-29

<!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>地区</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>
图片描述

期望：第二列只出现一个中国；中国包含河南，北京，四川这种效果

javascript

html5 html

阅读 2.9k

2 个回答

$(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);
    });

jzoom

1.2k116

发布于
2018-06-29

<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;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之类的现代化工具吧

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

table表格第二列相同内容时，列合并，跪求

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？

table表格第二列相同内容时，列合并，跪求

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？