代码：

<!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. CSS小tip整理

    CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB&quo ...

  2. iOS 监听键盘变化

    //将要显示键盘 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(willShowKeyboard: ...

  3. 简单天气应用开发——解析HeWeather JSON

    借助和风天气API成功获取到了我想要的天气信息,但在怎么提取出我想要的数据上又遇到了问题. {"HeWeather data service 3.0":[{"basic& ...

  4. app微信支付服务器端php demo

    class Wxpay { /* 配置参数 */ private $config = array( 'appid' => "wxc92b12277f277355", /*微信 ...

  5. Linux串口编程详解（转）

    串口本身,标准和硬件 † 串口是计算机上的串行通讯的物理接口.计算机历史上,串口曾经被广泛用于连接计算机和终端设备和各种外部设备.虽然以太网接口和USB接口也是以一个串行流进行数据传送的,但是串口连接 ...

  6. 闲来无事写写-Huffman树的生成过程

    前言:最近项目上一直没事干,感觉无聊到了极点,给自己找点事做,补一下大学没有完成的事情,写一个huffman算法Java版的,学校里面写过c语言的. 因为很久没搞数据结构和算法这方面了(现在搞Java ...

  7. 【LeetCode】Path Sum 2 --java 二叉数 深度遍历，保存路径

    在Path SUm 1中(http://www.cnblogs.com/hitkb/p/4242822.html) 我们采用栈的形式保存路径,每当找到符合的叶子节点,就将栈内元素输出.注意存在多条路径 ...

  8. Flex的学习资源

    学习网站 http://www.adobe.com/cn/devnet/flex.html Adobe Flex开发人员中心 http://www.adobe.com/cn/devnet/flex/v ...

  9. Linq to sql介绍及增、删、改、查

    LinQ是指集成化查询语言,通过映射将数据库内的表名变为C#的类名,将列名作为属性名,将表的关系作为类的成员对象.O--M--R O-Object对象 R-Relation关系 M-Mapping映射 ...

  10. HTML+CSS基础总结

    1. 首先声明正确的文档类型doctype 通常有四种文档类型可供选择: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...