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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
vue实现评价星星功能
Jun 30 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
基于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
php中变量及部分适用方法
2008/03/27 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
python里大整数相乘相关技巧指南
2014/09/12 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
python在地图上画比例的实例详解
2020/11/13 Python
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
采购员岗位职责
2013/11/15 职场文书
优秀教师获奖感言
2014/01/31 职场文书
重阳节登山活动方案
2014/02/03 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
小学运动会演讲稿
2014/08/25 职场文书
搞笑老公保证书
2015/02/26 职场文书
大学校园招聘会感想
2015/08/10 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书