代码：

<!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. Jquery filter()方法简介

    利用filter函数可以从wrapper set中过滤符合条件的dom元素. 如下图html代码,假如我们要获取类名为filter的<a>标签,用filter方法可以很轻松的获得. < ...

  2. PKU POJ 1006 Biorhythms (中国剩余定理)

    中国剩余定理 x = ai (mod mi)  ai和mi是一组数,mi两两互质,求x 令Mi = m1*m2*~mk     其中,mi不包含在内. 因为mi两两互质,所以存在x和y, st   M ...

  3. poj2032Square Carpets(IDA* + dancing links)

    题目请戳这里 题目大意:给一个H行W列的01矩阵,求最少用多少个正方形框住所有的1. 题目分析:又是一个红果果的重复覆盖模型.DLX搞之! 枚举矩阵所有的子正方形,全1的话建图.判断全1的时候,用了一 ...

  4. codility上的练习（5）

    codility出了lesson 5了. (1) 合法括号序列,包括( [ { ) ] }这6种字符的字符串,长度N在[0..200000]范围内,为其是否合法. 要求时间复杂度O(N),空间复杂度O ...

  5. html 表头固定

    <div style="width: 100%; min-width: 300px; padding-right: 10px;"> <table style=&q ...

  6. C中的正则函数sscanf

    头文件 #include 定义函数 int sscanf (const char *str,const char * format,........); 函数说明 sscanf()会将参数str的字符 ...

  7. Vistual Studio 2010 调试无法进断点

    系统是2003出现的问题 win8就没事 打sp1 补丁就行

  8. 前端笔试题2 JS部分

    笔试题2 var EventME = {}; EventME.addHandle = function(ele, eventName, handleFunction) { if (ele.addEve ...

  9. 用JS画斐波那契螺旋线（黄金螺旋线）

    偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <h ...

  10. HDU 3307 Description has only two Sentences

    数学实在是差到不行了…… #include <cstdio> #include <cstring> #include <algorithm> #include &l ...