在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. SOA （面向服务的架构）-Service Oriented Architecture

    SOA (面向服务的架构) 编辑 面向服务的架构(SOA)是一个组件模型,它将应用程序的不同功能单元(称为服务)通过这些服务之间定义良好的接口和契约联系起来.接口是采用中立的方式进行定义的,它应该独立 ...

  2. python 9*9乘法口诀表

    # -*- coding: utf-8 -*- # __author__ = 'Carry' for i in range(1, 10): for j in range(1, i + 1): prin ...

  3. linq 左连接实现两个集合的合并

    //第一个集合为所有的数据 var specilist = new List<Me.SpecificationsInfo>(); var resultall = (from a in db ...

  4. BZOJ 3173 最长上升子序列(树状数组+二分+线段树)

    给定一个序列,初始为空.现在我们将1到N的数字插入到序列中,每次将一个数字插入到一个特定的位置.每插入一个数字,我们都想知道此时最长上升子序列长度是多少? 由于序列是顺序插入的,所以当前插入的数字对之 ...

  5. Vivian's Problem UVA - 1323(梅林素数+状压二进制)

    借鉴:https://blog.csdn.net/miku23736748/article/details/52135932 https://blog.csdn.net/acm_cxlove/arti ...

  6. hdu 3307 简单的指数循环节

    #include<stdio.h>#include<string.h>#include<algorithm>#define LL __int64using name ...

  7. 【刷题】BZOJ 1061 [Noi2008]志愿者招募

    Description 申奥成功后,布布经过不懈努力,终于成为奥组委下属公司人力资源部门的主管.布布刚上任就遇到了一个难题:为即将启动的奥运新项目招募一批短期志愿者.经过估算,这个项目需要N 天才能完 ...

  8. 破解CobaltStrike3.12（转）

      0x00  概述 CobaltStrike是一款内网渗透的商业远控软件,支持自定义脚本扩展,功能非常强大.前段时间Github上有好心人放出了CobaltStrike3.12的试用版,接着Lz1y ...

  9. Android字体设置

    // 自定义字体custom = new TextView(this);//xx.ttf located at assets/fonts/typeface = Typeface.createFromA ...

  10. 【线段树分治】【P5227】 [AHOI2013]连通图

    Description 给定一个无向连通图和若干个小集合,每个小集合包含一些边,对于每个集合,你需要确定将集合中的边删掉后改图是否保持联通.集合间的询问相互独立 定义一个图为联通的当且仅当对于任意的两 ...