在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. 优先级：P0

    优先级:P0 Priority https://www.zhihu.com/question/23353333?sort=created 一个团队, 每周需求pk的例会,每个产品经理都要给自己提出的需 ...

  2. 【Python】python 2 map() reduce()

    利用map()函数,把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字.输入:['adam', 'LISA', 'barT'],输出:['Adam', 'Lisa', 'Bart']. ...

  3. SPOJ_VLATTICE

    题目是给你一个空间,和一个点(n,n,n),求从原点出发能够直接接触多少个点(不经过任何一个点)? 典型的mobius反演即可. 首先,ans=3,因为(1,0,0),(0,1,0),(0,0,1)这 ...

  4. 你好，OI

    高二了才开通真正意义上的博客...以前一直比较懒没写过什么,现在为了给自己留下一点回忆还是过来了. 上半年的那次失败还是历历在目啊...几个月来一直在我心中挥之不去.虽说也是自己的能力不足造成的,但是 ...

  5. 【刷题】COGS 2701 动态树

    ★★★☆ 输入文件:dynamic_tree.in 输出文件:dynamic_tree.out 简单对比 时间限制:1 s 内存限制:256 MB [题目描述] 开始时有n个点形成的森林,共m个操作. ...

  6. 【IOI 2018】Doll 机械娃娃

    我感觉这个题作为Day2T1,有一定的挑战性.为$Rxd$没有完成这道题可惜. 我觉得这道题,如果按照前几个部分分的思路来想,就有可能绕进错误的思路中.因为比如说每个传感器最多只在序列中出现$2$次, ...

  7. Java类编译、加载、和执行机制

    Java类编译.加载.和执行机制 标签: java 类加载 类编译 类执行 机制 0.前言 个人认为,对于JVM的理解,主要是两大方面内容: Java类的编译.加载和执行. JVM的内存管理和垃圾回收 ...

  8. 解题：USACO14MAR Sabotage

    题面 题外话:我的实数二分有什么问题=.= 仍然(我为什么要这么说)是二分答案,如何检查呢?将所有的数减去二分出来的$mid$后求和得到和$sum$,然后如果在减出来的数列中能找出一段大于$sum$的 ...

  9. 【学习笔记】BEST定理

    害怕忘记简单写一点: 无向图的生成树计数:https://www.cnblogs.com/zj75211/p/8039443.html   (*ZJ学长 ORZ ) 有向图的欧拉回路计数:https: ...

  10. .net 控件开发常见的特性总结

    http://blog.csdn.net/aofengdaxia/article/details/5924364 在.net开发中常常需要使用一些[]里面的特性描述,我发现对常用的几个知道大概的意思, ...