代码：

<!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. KeCode对照表（键盘按键的获取）

    KeyCode键盘对照表: http://www.cnblogs.com/furenjian/articles/2957770.html

  2. 一个label 里面 显示中文和英文不同颜色

    - (void)viewDidLoad {    [super viewDidLoad];    self.view.backgroundColor = [UIColor yellowColor];  ...

  3. POJ 3167 Cow Patterns（模式串浮动匹配）

    题目链接:http://poj.org/problem?id=3167 题意:模式串可以浮动的模式匹配问题给出模式串的相对大小,需要找出模式串匹配次数和位置. 思路:统计比当前数小,和于当前数相等的, ...

  4. UVa 10806 Dijkstra,Dijkstra(最小费用最大流)

    裸的费用流.往返就相当于从起点走两条路到终点. 按题意建图,将距离设为费用,流量设为1.然后增加2个点,一个连向节点1,流量=2,费用=0;结点n连一条同样的弧,然后求解最小费用最大流.当且仅当最大流 ...

  5. Android 开发笔记“Application 理解”

    Android 中Application类用法 1.             Application和Activity,Service一样是Android框架的一个系统组件,当Android程序启动时 ...

  6. 关于Python的self指向性

    Python的self是指向类的实例化对像,而不是类本身,每次调用类的实例化即self指向此实例化对像,如下代码: class Person: def __init__(self,name): sel ...

  7. 关于JVM的GC机制

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

  8. 超轻量级PHP SQL数据库框架

    <?php /** * ! Medoo 0.8.5 - Copyright 2013, Angel Lai - MIT license - http://medoo.in */ class me ...

  9. What is a good EPUB reader on Linux

    Last updated on August 20, 2014 Authored by Adrien Brochard 12 Comments If the habit on reading book ...

  10. 开源流媒体处理库live555服务器端、客户端源代码分析总结

    RTSP服务器端流程: 1. RTSP连接的建立过程 RTSPServer类用于构建一个RTSP服务器,该类同时在其内部定义了一个RTSPClientSession类,用于处理单独的客户会话. 首先创 ...