JQuery实现表格的相同单元格合并的三种方法
代码：
<!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实现表格的相同单元格合并的三种方法的更多相关文章
- jquery 将disabled的元素置为enabled的三种方法
转--http://www.jb51.net/article/19342.htm 在jquery中可以通过jqueryObj.attr("disabled","disab ...
- 【转载】Python中如何高效实现两个字典合并，三种方法比较。
本文转载自:http://www.pythoner.com/13.html Python中将两个字典进行合并操作,是一个比较常见的问题.本文将介绍几种实现两个字典合并的方案,并对其进行比较. 对于这个 ...
- JS：jquery插件表格单元格合并.
公司需要用到单元格合并,于是动手封装了一个简单的jquery插件,封装的函数是直接写好转的,请多多提意见看代码是否有优化的地方..... 截图: 代码: /* * mergeTable 0.1 * C ...
- Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等
目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等 ...
- PHPWord中文乱码、单元格合并、动态表格模板解决方案合集
摘要: 最近一个项目开发要用到PHP技术导出Word文档,采用PHPWord插件,版本为0.6.2 beta,CodePlex已停止维护.网上还有另外一个版本的PhpWord,项目类名大小写上略有不 ...
- NPOI 教程 - 2.1单元格合并
来源:http://liyingchun343333.blog.163.com/blog/static/3579731620091018212990/ 合并单元格在制作表格时很有用,比如说表格的标题就 ...
- ASP.NET- 合并HTML的表格相同项单元格
我对控件的依懒是比较少的.有几个控件我比较喜欢用,例如REPEATER显示列表的控件,能提供很大的方便. 使用REPEATER有一个比较方便的功能是通过几句代码就实现了相同项合并单元格合并,这个虽然平 ...
- SNF快速开发平台MVC-表格单元格合并组件
1. 表格单元格合并组件 1.1. 效果展示 1.1.1. 页面展现表格合并单元格 图 4.1 1.1.2. 导出excel合并单元格 图 4.2 1.2. 调用说 ...
- excel技巧--单元格合并与拆分
如果要将上图的地区列做成下图的合并单一列: 有如下做法: (以下图表格为例) 1.选择要排序的表格,点击“开始”-->排序和筛选-->自定义排序.在对话框选择“业务项目”进行排序: 2.选 ...
随机推荐
- XML 文档解析操作
sing System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security; ...
- Node.js模块os
OS 操作系统模块 os.hostname() 操作系统的主机名. os.type() 操作系统的名称 os.release() 操作系统的发行版本 os.uptime() 当前系统的时间 以秒为 o ...
- chrome 、 火狐等浏览器对空格符 解析不同，页面显示不一致
最近初学web,从头开始,菜鸟级别,遇到的小问题记录下来. 网上资料说 空格在ie.firefox.chrome浏览器上显示的效果不太一样,主要是前面的空格宽度不同,这可能是因为不同的浏览器会有不同的 ...
- WinSock网络编程基础（2）客户端
接下来说一下如何用WinSock创建基于TCP/IP模型的客户端和服务器. TCP可以提供两个计算机间可靠无误的数据传输,应用程序使用TCP通信时,会在两台计算机之间建立一个虚拟连接,连接之后计算机之 ...
- BestCoder Round #46
1001 YJC tricks time 题目链接:1001 题意:给你时针和分针所成的角度,输出现在的时间,以10秒为单位 思路:每10秒,分针走1度,时针走分针的1/12,我们可以根据时间来分别计 ...
- JQuery中回车键登陆
//点击回车键 //王东升/2015/3/11 document.onkeydown = function (event) { var e = event ? event : (window.even ...
- 不小心中了machook病毒
此文运用的是优雅的Markdown而书 前段回家过年的日子,我心爱的小air在运行时不停的弹出"machook停止运行"的提醒,上网google一下不看不要紧,才得知是mac上的一 ...
- Array.Add () and += in PowerShell
$newArray = @() $newArray.Add("Hello") If I create a new array, and using the method Add() ...
- 【转】关于UItableViewCell的accessoryType属性
转载自:http://blog.csdn.net/kmyhy/article/details/6442351 使用的话,例如: cell.accessoryType = UITableViewCell ...
- [置顶] MongoDB 分布式操作——分片操作
MongoDB 分布式操作——分片操作 描述: 像其它分布式数据库一样,MongoDB同样支持分布式操作,且MongoDB将分布式已经集成到数据库中,其分布式体系如下图所示: 所谓的片,其实就是一个单 ...