在Web中经常需要合并单元格，例如对于下面一个表格:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            table,

            table tr th,

            table tr td {

                border: 1px solid #0094ff;

            }

        </style>

    </head>

    <body>

        <table style="border: 1px;" id="test1">

            <thead>

                <tr>

                    <th>表头1</th>

                    <th>表头2</th>

                    <th>表头3</th>

                    <th>表头4</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>列1</td>

                    <td>列2</td>

                    <td>列3</td>

                    <td>列4</td>

                </tr>

                <tr>

                    <td>列1</td>

                    <td>列2</td>

                    <td>列3</td>

                    <td>列4</td>

                </tr>

                <tr>

                    <td>列1</td>

                    <td>列2</td>

                    <td>列3</td>

                    <td>列4</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

表格原来样式:

 合并的JS方法:(可以作为一个工具方法)

1.纵向合并，也就是对同一列的相邻行单元格相同的进行合并

            /**

             * 合并单元格(如果结束行传0代表合并所有行)

             * @param table1    表格的ID

             * @param startRow  起始行

             * @param endRow    结束行

             * @param col   合并的列号，对第几列进行合并(从0开始)。第一行从0开始

             */

            function mergeCell(table1, startRow, endRow, col) {

                var tb = document.getElementById(table1);

                if(!tb || !tb.rows || tb.rows.length <= 0) {

                    return;

                }

                if(col >= tb.rows[0].cells.length || (startRow >= endRow && endRow != 0)) {

                    return;

                }

                if(endRow == 0) {

                    endRow = tb.rows.length - 1;

                }

                for(var i = startRow; i < endRow; i++) {

                    if(tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) { //如果相等就合并单元格,合并之后跳过下一行

                        tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[col]);

                        tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan) + 1;

                    } else {

                        mergeCell(table1, i + 1, endRow, col);

                        break;

                    }

                }

            }

例如上面:

mergeCell('test1', 0, 0, 3);

结果

补充:如果想合并多列可以多次调用此方法，但是需要注意先合并后面的列，再合并前面的列

(1)合并多列正确用法

    mergeCell('test1', 0, 0, 3);

    mergeCell('test1', 0, 0, 2);

    mergeCell('test1', 0, 0, 1);

(2)如果先合并前面的列查看效果

    mergeCell('test1', 0, 0, 1);

    mergeCell('test1', 0, 0, 2);

    mergeCell('test1', 0, 0, 3);

JS合并单元格的更多相关文章

  1. table JS合并单元格

    function _w_table_rowspan(_w_table_id,_w_table_colnum){ _w_table_firsttd = ""; _w_table_cu ...

  2. JS实现EasyUI ,Datagrid,合并单元格功能

    为了实现datagrid的合并单元格效果,datagrid的数据加载方式肯定是要写在JS文件内部的. 一:在JS内部添加Datagrid数据加载方法如下: $("#id").dat ...

  3. Datatables js 复杂表头 合并单元格

    x →Datatables官网← x 项目中用到的Table都是用Datatables插件来搞得: 以前都是生成一般性的table: 近期要生成一些复杂表头,合并单元格之类的: 研究了一下. x 去官 ...

  4. js动态加载数据并合并单元格

    js动态加载数据合并单元格, 代码如下所示,可复制直接运行: <!DOCTYPE HTML> <html lang="en-US"> <head> ...

  5. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

  6. js 表格合并单元格

    5列  根据需要可添加 或 删除 strOneTemp  strTwoTemp  strThreeTemp  strFourTemp  strFiveTemp //合并单元格  this.mergeC ...

  7. jquery操作表格 合并单元格

    jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...

  8. easyui datagrid 合并单元格

    整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获 ...

  9. 带复杂表头合并单元格的HtmlTable转换成DataTable并导出Excel

    步骤: 一.前台JS取HtmlTable数据,根据设定的分隔符把数据拼接起来 <!--导出Excel--> <script type="text/javascript&qu ...

随机推荐

  1. 使用docker部署项目

    一.Dockerfile编写 FROM hub.c.163.com/library/java:8-alpine ADD target/*.jar app.jar EXPOSE 8761 ENTRYPO ...

  2. Pscp与服务器文件传递

    1. 下载pscp.exe https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html 选择并下载pscp.exe 2. 执行cmd程 ...

  3. springmvc接收date类型参数

    springmvc在表单提交接收date类型参数的时候会报错:Cannot convert value of type [java.lang.String] to required type [jav ...

  4. 回车”（carriage return）和”换行”（line feed）的区别和来历-（附：ASCII表）

    这两天研究小票打印机编程手册,遇到这样一个问题:     LF,即Line Feed,中文意思“换行”:CR,即Carriage Return,中文意思“回车”.但是我们通常把这两个混为一谈.既然设置 ...

  5. 如何认识TOS----DSCP 对照表

    如何认识TOS----DSCP 对照表 最近有遇到项目中对FortiGate设置TOS的策略路由的问题,其实这问题较为简单,但是由于大家对TOS-DSCP概念不熟悉造成的,所以感觉比较难,现在不同厂商 ...

  6. MT【148】凸数列

    (2018浙江省赛13题) 设实数$x_1,x_2,\cdots,x_{2018}$满足$x_{n+1}^2\le x_nx_{n+2},(n=1,2,\cdots,2016)$和$\prod\lim ...

  7. 【刷题】BZOJ 4530 [Bjoi2014]大融合

    Description 小强要在N个孤立的星球上建立起一套通信系统.这套通信系统就是连接N个点的一个树. 这个树的边是一条一条添加上去的.在某个时刻,一条边的负载就是它所在的当前能够 联通的树上路过它 ...

  8. Swift中使用MPMoviePlayerController实现自定义视频播放器界面

    默认情况下播放器自带各种控制按钮,比如前进后退播放暂停等: var url = NSBundle.mainBundle().URLForResource("1", withExte ...

  9. SpringBoot整合Kotlin构建Web服务

    今天我们尝试Spring Boot整合Kotlin,并决定建立一个非常简单的Spring Boot微服务,使用Kotlin作为编程语言进行编码构建. 创建一个简单的Spring Boot应用程序.我会 ...

  10. 【转】每个 Linux 新手都应该知道的 10 个命令

    你可能认为你是 Linux 新手,但实际上并不是.全球互联网用户有 3.74 亿,他们都以某种方式使用 Linux,因为 Linux 服务器占据了互联网的 90%.大多数现代路由器运行 Linux 或 ...