JQuery实现表格中相同单元格合并示例代码


Posted in Javascript onJune 26, 2013

代码:

<!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掉一个元素后,有些元素就找不到了或者说不是要找的那个元素;最好是从后面开始循环。
Javascript 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
JavaScript严格模式详解
Nov 18 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
简单的js表格操作
Sep 24 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 #Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 #Javascript
如何让页面加载完成后执行js
Jun 26 #Javascript
文件编码导致jquery失效的解决方法
Jun 26 #Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 #Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 #Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 #Javascript
You might like
用Flash图形化数据(二)
2006/10/09 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
删除select中所有option选项jquery代码
2013/08/12 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
Python中的进程分支fork和exec详解
2015/04/11 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
python清理子进程机制剖析
2017/11/23 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
公司委托书范本5篇
2014/09/20 职场文书
银行招聘自荐信
2015/03/06 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript