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

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <style>
  8.             table,
  9.             table tr th,
  10.             table tr td {
  11.                 border: 1px solid #0094ff;
  12.             }
  13.         </style>
  14.     </head>
  15.  
  16.     <body>
  17.         <table style="border: 1px;" id="test1">
  18.             <thead>
  19.                 <tr>
  20.                     <th>表头1</th>
  21.                     <th>表头2</th>
  22.                     <th>表头3</th>
  23.                     <th>表头4</th>
  24.                 </tr>
  25.             </thead>
  26.             <tbody>
  27.                 <tr>
  28.                     <td>列1</td>
  29.                     <td>列2</td>
  30.                     <td>列3</td>
  31.                     <td>列4</td>
  32.                 </tr>
  33.                 <tr>
  34.                     <td>列1</td>
  35.                     <td>列2</td>
  36.                     <td>列3</td>
  37.                     <td>列4</td>
  38.                 </tr>
  39.                 <tr>
  40.                     <td>列1</td>
  41.                     <td>列2</td>
  42.                     <td>列3</td>
  43.                     <td>列4</td>
  44.                 </tr>
  45.             </tbody>
  46.         </table>
  47.  
  48.     </body>
  49.  
  50. </html>

表格原来样式:

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

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

  1.             /**
  2.              * 合并单元格(如果结束行传0代表合并所有行)
  3.              * @param table1    表格的ID
  4.              * @param startRow  起始行
  5.              * @param endRow    结束行
  6.              * @param col   合并的列号，对第几列进行合并(从0开始)。第一行从0开始
  7.              */
  8.             function mergeCell(table1, startRow, endRow, col) {
  9.                 var tb = document.getElementById(table1);
  10.                 if(!tb || !tb.rows || tb.rows.length <= 0) {
  11.                     return;
  12.                 }
  13.                 if(col >= tb.rows[0].cells.length || (startRow >= endRow && endRow != 0)) {
  14.                     return;
  15.                 }
  16.                 if(endRow == 0) {
  17.                     endRow = tb.rows.length - 1;
  18.                 }
  19.                 for(var i = startRow; i < endRow; i++) {
  20.                     if(tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) { //如果相等就合并单元格,合并之后跳过下一行
  21.                         tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[col]);
  22.                         tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan) + 1;
  23.                     } else {
  24.                         mergeCell(table1, i + 1, endRow, col);
  25.                         break;
  26.                     }
  27.                 }
  28.             }

例如上面:

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

结果

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

(1)合并多列正确用法

  1.     mergeCell('test1', 0, 0, 3);
  2.     mergeCell('test1', 0, 0, 2);
  3.     mergeCell('test1', 0, 0, 1);

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

  1.     mergeCell('test1', 0, 0, 1);
  2.     mergeCell('test1', 0, 0, 2);
  3.     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. Python实现双色球和大乐透摇奖

    实现代码: # code by kadycui # 模块引用 import random def select(): print('\n') print('请选择彩票种类') print('双色球输入 ...

  2. 【UOJ228】基础数据结构练习题（线段树）

    [UOJ228]基础数据结构练习题(线段树) 题面 UOJ 题解 我们来看看怎么开根? 如果区间所有值都相等怎么办? 显然可以直接开根 如果\(max-sqrt(max)=min-sqrt(min)\ ...

  3. POJ 3348 Cows | 凸包——童年的回忆（误）

    想当年--还是邱神给我讲的凸包来着-- #include <cstdio> #include <cstring> #include <cmath> #include ...

  4. 如何在Eclipse 中查看（如Objects）的源代码

    今天突然想看Objects的源码,结果失败了,总结了一下,贴出来. 一般查看源码的流程: 使用快捷键Ctri+Shit+T出现Open Type的对话框,在里面直接输入类名,回车就行: 在Eclips ...

  5. 【BZOJ4872】【Shoi2017】分手是祝愿

    Time Limit: 20 Sec Memory Limit: 512 MB Description ​ Zeit und Raum trennen dich und mich. ​ 时空将你我分开 ...

  6. 【bzoj4541】 Hnoi2016—矿区

    http://www.lydsy.com/JudgeOnline/problem.php?id=4541 (题目链接) 题意 给出一个平面图,若干询问,每次询问一个凸多边形内小多边形面积的平方和与面积 ...

  7. Linux内核分析实验五

    一.给MenuOS增加time和time-asm命令 1. 克隆并自动编译MenuOS rm menu -rf 强制删除原menu文件 git clone http: cd menumake root ...

  8. Xpack集成LDAP

    支持两种配置方式: The ldap realm supports two modes of operation, a user search mode and a mode with specifi ...

  9. 【题解】打地鼠 SDOI2011 模拟 行列无关

    Prelude 为什么洛谷上的题解都是剪枝做的啊!就没有人写复杂度靠谱的算法吗! 传送到洛谷:(￣.￣) 传送到BZOJ:( ´･･)ﾉ(._.`) 本篇博客地址:o(><:)oo Sol ...

  10. 【Asp.net入门4-01】基本开发工具