在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. POJ1637_Sightseeing tour

    给一个联通图,有的是单向边,有的是双向边,问是否存在欧拉回路. 乍一看毫无思路,可以这样来搞,对于每条无向边,我们随便指定一个方向,看看是否能够做到所有点的度数之和为偶数. 接下来,对于我们指定的边, ...

  2. HDU4436_str2int

    很好的一个题目.对于理解后缀自动机很有用. 题目给你若干数字串,总长度不超过100000,任意一个串的任意一个子串都可以拿出来单独的作为一个数字.同一个数字只算一次. 问所有不同数字的和为多少? 嗯嗯 ...

  3. jenkins自动部署windwos服务器

    jenkins 持续构建windows 项目 需求说明 公司新购windwos服务器,并配置了堡垒机,由于经常要提交代码进行更新,导致手动部署很是麻烦,故采用公司jenkins实行持续构建 jenki ...

  4. 命令行Scp的使用----远程拷贝文件

    1.用CRT分别连上两台需要传输文件的linux系统服务器,并检查防火墙是否关闭. 查看防火墙状态: /etc/init.d/iptables status 若防火墙启用,暂时关闭防火墙: /etc/ ...

  5. 【uoj129】 NOI2015—寿司晚宴

    http://uoj.ac/problem/129 (题目链接) 题意 给出2~n这n-1个数,求选2个集合,使得从两集合中任意各选取1个数出来它们都互质.求方案数. Solution PoPoQQQ ...

  6. nmon

    http://www.cnblogs.com/me-sa/articles/centos0006.html

  7. Java之Object类和常用的API

    Object类和常用的API 学习过程中的笔记,涉及到Objetc中的equals方法和toString方法,日期类Date,日历类Calendar,日期格式化类SimpleDateFormat以及基 ...

  8. SenseTime Ace Coder Challenge 暨 商汤在线编程挑战赛 E. 疯狂计数

    1.改高精度 :float/double的精度为x位,小数部分最多x+x位(乘法和加法),整数部分<1000000*1000000/2=5 * 10^11 2.分成整数部分和小数部分分别存储,貌 ...

  9. 线性判别分析 LDA

    点到判决面的距离 点\(x_0\)到决策面\(g(x)= w^Tx+w_0\)的距离:\(r={g(x)\over \|w\|}\) 广义线性判别函数 因任何非线性函数都可以通过级数展开转化为多项式函 ...

  10. Tensorflow训练神经网络

    以下代码摘自<Tensorflow实战Google 深度学习框架>. 由于这段代码包含了激活函数去线性化,多层神经网络,指数衰减学习率,正则化防止过拟合,滑动平均稳定模型等手段,涵盖了神经 ...