合并表格相同单元格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="layui/css/layui.css" media="all">
        <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    </head>
    <body>
        <div class="layui-form">
            <table class="layui-table" id="tab">
                <colgroup>
                    <col width="150">
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th colspan="3">考核指标</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>贤心</td>
                        <td>汉族</td>
                        <td>1989-10-14</td>

                    </tr>
                    <tr>
                        <td>贤心</td>
                        <td>汉族</td>
                        <td>1920-09-30</td>

                    </tr>
                    <tr>
                        <td>贤心</td>
                        <td>拉丁美裔</td>
                        <td>1880-06-27</td>

                    </tr>
                    <tr>
                        <td>岳飞</td>
                        <td>汉族</td>
                        <td>1103-北宋崇宁二年</td>

                    </tr>
                    <tr>
                        <td>岳飞</td>
                        <td>华夏族（汉族）</td>
                        <td>公元前-372年</td>
                    </tr>
                    <tr>
                        <td>岳飞</td>
                        <td>汉族</td>
                        <td>1989-10-14</td>
                    
                    </tr>
                    <tr>
                        <td>张爱玲</td>
                        <td>汉族</td>
                        <td>1920-09-30</td>
                    
                    </tr>
                    <tr>
                        <td>张爱玲</td>
                        <td>拉丁美裔</td>
                        <td>1880-06-27</td>
                    
                    </tr>
                    <tr>
                        <td>张爱玲</td>
                        <td>汉族</td>
                        <td>1103-北宋崇宁二年</td>
                    
                    </tr>
                    <tr>
                        <td>张爱玲</td>
                        <td>华夏族（汉族）</td>
                        <td>公元前-372年</td>
                    </tr>
                    <tr>
                        <td>张爱玲</td>
                        <td>汉族</td>
                        <td>1989-10-14</td>
                    
                    </tr>
                    <tr>
                        <td>张爱玲</td>
                        <td>汉族</td>
                        <td>1920-09-30</td>
                    
                    </tr>
                    <tr>
                        <td>Helen Keller</td>
                        <td>拉丁美裔</td>
                        <td>1880-06-27</td>
                    
                    </tr>
                    <tr>
                        <td>Helen Keller</td>
                        <td>汉族</td>
                        <td>1103-北宋崇宁二年</td>
                    
                    </tr>
                    <tr>
                        <td>Helen Keller</td>
                        <td>华夏族（汉族）</td>
                        <td>公元前-372年</td>
                    </tr>
                    <tr>
                        <td>Helen Keller</td>
                        <td>汉族</td>
                        <td>1989-10-14</td>
                    
                    </tr>
                    <tr>
                        <td>Helen Keller</td>
                        <td>汉族</td>
                        <td>1920-09-30</td>
                    
                    </tr>
                    <tr>
                        <td>Helen Keller</td>
                        <td>拉丁美裔</td>
                        <td>1880-06-27</td>
                    
                    </tr>
                    <tr>
                        <td>Helen Keller</td>
                        <td>汉族</td>
                        <td>1103-北宋崇宁二年</td>
                    
                    </tr>
                    <tr>
                        <td>孟子</td>
                        <td>华夏族（汉族）</td>
                        <td>公元前-372年</td>
                    </tr>
                    <tr>
                        <td>孟子</td>
                        <td>汉族</td>
                        <td>1989-10-14</td>
                    
                    </tr>
                    <tr>
                        <td>孟子</td>
                        <td>汉族</td>
                        <td>1920-09-30</td>
                    
                    </tr>
                    <tr>
                        <td>孟子</td>
                        <td>拉丁美裔</td>
                        <td>1880-06-27</td>
                    
                    </tr>
                    <tr>
                        <td>孟子</td>
                        <td>汉族</td>
                        <td>1103-北宋崇宁二年</td>
                    
                    </tr>
                    <tr>
                        <td>孟子</td>
                        <td>华夏族（汉族）</td>
                        <td>公元前-372年</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="layui/layui.js" charset="utf-8"></script>
    
        <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
        <script>
            window.onload = function() {
                var tab = document.getElementById("tab");
                var maxCol = 2,
                    val, count, start; // maxCol 为需要合并的列来为多少列，如3，那就是第1到第3列
                // maxCol如果为1,那就是只合并第一列
                // val 相同的列，
                for (var col = maxCol - 1; col >= 0; col--) {
                    count = 1;
                    val = "";
                    for (var i = 1; i < tab.rows.length; i++) {
                        
                        if (val == $(tab.rows[i].cells[col]).text()) {
                            console.log(tab.rows[i].cells[col]);
                            count++;
                        } else {
                            if (count > 1) { //合并
                            
                                start = i - count;
                                tab.rows[start].cells[col].rowSpan = count;
                                for (var j = start + 1; j < i; j++) {
                                    tab.rows[j].cells[col].style.display = "none";
                                }
                                count = 1;
                            }
                            val = $(tab.rows[i].cells[col]).text();
                        }
                    }
                    
                    if (count > 1) { //合并，最后几行相同的情况下
                        start = i - count;
                        tab.rows[start].cells[col].rowSpan = count;
                        for (var j = start + 1; j < i; j++) {
                            tab.rows[j].cells[col].style.display = "none";
                        }
                    }
                }
            };
        </script>

    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容