代码：

<!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. 雪碧图（sprite）

    雪碧图 是一种将网页上常用且不经常变动的小图标集中在一张大图中,根据网页需求来显示图片的技术. 可以提高网页加载速度,增加用户体验. 其原理是通过html块状元素建立一个满足需求的视图窗口,然后在窗口 ...

  2. NSFileManager的应用

    单例,是在 一个文件中只创建一次就能够全部一起共享,多创建的地址是相同的 NSFileManager *manager=[NSFileManager defaultManager]; 是一个单例   ...

  3. Hibernate - cascade-and -session_state

    cascade属性: 默认为none,代表不级联. 级联是指操作主对象时,对关联的对象也做相同的操作. 可设为:delete, save-update, all, none ...-- 一般是对象只归 ...

  4. KMP算法的一次理解

    1. 引言 在一个大的字符串中对一个小的子串进行定位称为字符串的模式匹配,这应该算是字符串中最重要的一个操作之一了.KMP本身不复杂,但网上绝大部分的文章把它讲混乱了.下面,咱们从暴力匹配算法讲起,随 ...

  5. 简单的UIScrollView 下拉刷新

    这里只贴主要代码 #import "ViewController.h" @interface ViewController ()<UIScrollViewDelegate&g ...

  6. php基础知识（很简单一套适合零基础的朋友学习）

    红色的一般都是重点,还有自己的一些废话 运算符 算术运算符: 基本运算(除数不能为0) 比较运算符: 大小比较(类型比较), 如果两个类型不一样,系统会自动转换成统一类型 赋值运算符: 基本赋值和运算 ...

  7. codeforcese 498C. Array and Operations 网络流

    题目链接 给n个数, m个数对, 每个数对是两个下标加起来为奇数的两个数.每次操作可以使一个数对中的两个数同时除某个数, 除的这个数是这两个数的任意约数, 问这种操作最多可以做几次.n<100, ...

  8. js数组对象常用方法小结

    ~~~数组添加元素后一般返回数组的新长度 如: push(ele1[,ele2...]), unshift(ele1[,ele2...]) ~~~数组删除元素后一般返回被删除的元素 如: pop() ...

  9. (C#)Windows Shell 外壳编程系列8 - 同后缀名不同图标？

    原文 (C#)Windows Shell 外壳编程系列8 - 同后缀名不同图标? (本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一节:(C#)Windows Shell 外壳 ...

  10. 基于Visual C++2013拆解世界五百强面试题--题5-自己实现strstr

    请用C语言实现字符串的查找函数strstr, 找到则返回子字符串的地址,没有找到返回为空,请用数组操作与指针操作实现 看到题目想到最简单的方法就是母字符串和子字符串比较,如果不同,将指向母字符串的指针 ...