代码：

<!DOCTYPE html>

<html>

  <head>

    <title>merge.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="css/jquery-ui.css" />

    <script src="js/jquery.js"></script>

    <script src="js/jquery-ui.js"></script>

    <script type="text/javascript">

    function merge1(){         //可实现单元格，通过给 开始cell的比较

    var totalRow = $("#tbl").find("tr").length;

    var totalCol = $("#tbl").find("tr").eq(0).find("td").length;

       for(var col=totalCol-1;col>=1;col--){

    spanNum =1;

    startCell = $("#tbl").find("tr").eq(totalRow-1).find("td").eq(col);

    for(var row = totalRow-1;row>=1;row--){

targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);

if(startCell.text() == targetCell.text() && startCell.text()!=""){

spanNum++;

    targetCell.attr("rowSpan",spanNum);

startCell.remove();

}else{

spanNum =1;

}

    startCell = targetCell;

    }

    }

         }

    function merge2() {     //可实现合并单元格,上下行来比较

var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;

var totalRows = $("#tbl").find("tr").length;

for ( var i = totalCols-1; i >= 1; i--) {

for ( var j = totalRows-1; j >= 1; j--) {

startCell = $("#tbl").find("tr").eq(j).find("td").eq(i);

targetCell = $("#tbl").find("tr").eq(j - 1).find("td").eq(i);

if (startCell.text() == targetCell.text() && targetCell.text() != "") {

targetCell.attr("rowSpan", (startCell.attr("rowSpan")==undefined)?2:(eval(startCell.attr("rowSpan"))+1));

startCell.remove();

}

}

}

 }

/*先合并，使用style 的display:none将相同元素隐藏，然后再remove

*/

function merge3(){

var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;

var totalRows = $("#tbl").find("tr").length;

for(var col=totalCols-1;col>=1;col--){

    spanNum =1;

    startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col);

    for(var row = totalRows-1;row>=1;row--){

      targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);

if(startCell.text() == targetCell.text() && startCell.text()!=""){

spanNum++;

targetCell.attr("rowSpan",spanNum);

startCell.attr("style","visibility:hidden");

    // startCell.attr("style","display:none");

}else{

spanNum =1;

}

startCell = targetCell;

}

    }

for(var j=totalCols-1;j>=1;j--){

  for(var i=totalRows-1;i>=1;i--){

     cell =  $("#tbl").find("tr").eq(i).find("td").eq(j);

     if(cell.attr("style")!=undefined){

          if(cell.attr("style")=="visibility:hidden"){

            cell.remove();

          }

     }

  }

}

}

     function merge4(){       //与merge3方法类似，目的是看一下 display:none与visibility:hidden的效果区别

var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;

var totalRows = $("#tbl").find("tr").length;

for(var col=totalCols-1;col>=1;col--){

    spanNum =1;

    startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col);

    for(var row = totalRows-1;row>=1;row--){

      targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);

if(startCell.text() == targetCell.text() && startCell.text()!=""){

spanNum++;

targetCell.attr("rowSpan",spanNum);

startCell.attr("style","display:none");

// startCell.attr("style","display:none");

}else{

spanNum =1;

}

startCell = targetCell;

}

    }

for(var j=totalCols-1;j>=1;j--){

  for(var i=totalRows-1;i>=1;i--){

     cell =  $("#tbl").find("tr").eq(i).find("td").eq(j);

     if(cell.attr("style")!=undefined){

          if(cell.attr("style")=="display:none"){

            cell.remove();

          }

     }

  }

}

}

    </script>

  </head>

  <body>

  <table id="tbl"  cellpadding="3" border=1>

  <thead>

     <tr>

        <td>销售时间</td>

      <td>裙子</td>

      <td>裤子</td>

      <td>风衣</td>

      <td>鞋子</td>

     </tr>

  </thead>

  <tbody>

  <tr>

  <td>8:00-9:00</td>

      <td>3</td>

      <td></td>

      <td>4</td>

      <td></td>

  </tr>

  <tr>

  <td>9:00-10:00</td>

      <td>3</td>

      <td>2</td>

      <td>5</td>

      <td>3</td>

  </tr>

  <tr>

  <td>10:00-11:00</td>

      <td>3</td>

      <td>2</td>

      <td></td>

      <td>1</td>

  </tr>

  <tr>

  <td>11:00-12:00</td>

      <td></td>

      <td></td>

      <td></td>

      <td>1</td>

  </tr>

  </tbody>

  </table>

  <input type="button" value="合并" id="merge" onclick="merge2();">

  </body>

</html>

总结 ：在使用remove的时候 ，一定要注意如果 从list的开始元素循环下去，remove掉一个元素后，有些元素就找不到了或者说不是要找的那个元素；最好是从后面开始循环。

JQuery实现表格的相同单元格合并的三种方法的更多相关文章

  1. jquery 将disabled的元素置为enabled的三种方法

    转--http://www.jb51.net/article/19342.htm 在jquery中可以通过jqueryObj.attr("disabled","disab ...

  2. 【转载】Python中如何高效实现两个字典合并，三种方法比较。

    本文转载自:http://www.pythoner.com/13.html Python中将两个字典进行合并操作,是一个比较常见的问题.本文将介绍几种实现两个字典合并的方案,并对其进行比较. 对于这个 ...

  3. JS：jquery插件表格单元格合并.

    公司需要用到单元格合并,于是动手封装了一个简单的jquery插件,封装的函数是直接写好转的,请多多提意见看代码是否有优化的地方..... 截图: 代码: /* * mergeTable 0.1 * C ...

  4. Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等

    目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等 ...

  5. PHPWord中文乱码、单元格合并、动态表格模板解决方案合集

    摘要:  最近一个项目开发要用到PHP技术导出Word文档,采用PHPWord插件,版本为0.6.2 beta,CodePlex已停止维护.网上还有另外一个版本的PhpWord,项目类名大小写上略有不 ...

  6. NPOI 教程 - 2.1单元格合并

    来源:http://liyingchun343333.blog.163.com/blog/static/3579731620091018212990/ 合并单元格在制作表格时很有用,比如说表格的标题就 ...

  7. ASP.NET- 合并HTML的表格相同项单元格

    我对控件的依懒是比较少的.有几个控件我比较喜欢用,例如REPEATER显示列表的控件,能提供很大的方便. 使用REPEATER有一个比较方便的功能是通过几句代码就实现了相同项合并单元格合并,这个虽然平 ...

  8. SNF快速开发平台MVC-表格单元格合并组件

    1.   表格单元格合并组件 1.1.      效果展示 1.1.1.    页面展现表格合并单元格 图 4.1 1.1.2.    导出excel合并单元格 图 4.2 1.2.      调用说 ...

  9. excel技巧--单元格合并与拆分

    如果要将上图的地区列做成下图的合并单一列: 有如下做法: (以下图表格为例) 1.选择要排序的表格,点击“开始”-->排序和筛选-->自定义排序.在对话框选择“业务项目”进行排序: 2.选 ...

随机推荐

  1. ios即时通讯客户端开发之－mac上基于XMPP的聊天客户端开发环境搭建

    1.搭建服务器  -  安装顺序 - (mysql->openfire->spark) 数据库:mysql 服务器管理工具: openfire 测试工具: spark mysql 安装 h ...

  2. django-rest-framework 快速开始

    搭建项目 # Set up a new project django-admin.py startproject tutorial cd tutorial # Create a virtualenv ...

  3. iOS 中UITableViewController 中tableView 会被状态栏覆盖的问题

    解决办法在 生命周期函数viewDidAppear中设置即可 - (void)viewDidAppear:(BOOL)animated { self.tableView.frame = CGRectM ...

  4. C++内置类型对象之间的转换

    C++定义了一组内置类型对象之间的标准转换,在必要时它们被编译器隐式地应用到对象上. 隐式类型转换发生在下列这些典型情况下. 1. 在混合类型的算数表达式中 规则:在这种情况下最宽的数据类型成为目标转 ...

  5. Git Version recovery command introduction - git reset

    reset命令有3种方式: git reset –mixed:此为默认方式,不带任何参数的git reset,即时这种方式,它回退到某个版本,只保留源码,回退commit和index信息 git re ...

  6. 关于JVM的GC机制

    GC优点: 1.提高生产率,不用逐行检查内存是否释放. 2.Java安全策略的一部分,不会使用户错误释放内存而导致JVM崩溃. GC算法基本两点: 1.检测出垃圾对象. 2.回收垃圾对象,释放相应堆空 ...

  7. 帝国cms7.2灵动标签万能教程

    学完本文,就完全能掌握帝国模板开发制作啦!这里只介绍sql语句调用方法(方便,快捷!) 灵动标签语法: [e:loop={,24,0}] 模板内容 [/e:loop] 详细解释:黄色部分:条件语句,即 ...

  8. WINDOWS硬件通知应用程序的常方法

    摘要:在目前流行的Windows操作系统中,设备驱动程序是操纵硬件的最底层软件接口.为了共享在设备驱动程序设计过程中的经验,给出设备驱动程序通知应用程序的5种方法,详细说明每种方法的原理和实现过程,并 ...

  9. Android Animations动画使用详解

    一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XML配置文件中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画 ...

  10. VS2010/MFC设置对话框控件的Tab顺序

    设置对话框控件的Tab顺序 前面几节为大家演示了加法计算器程序完整的编写过程,本节主要讲对话框上控件的Tab顺序如何调整. 上一讲为“计算”按钮添加了消息处理函数后,加法计算器已经能够进行浮点数的加法 ...