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 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
jquery中this的使用说明
Sep 06 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 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生成静态文件的多种方法分享
2012/07/17 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
python创建临时文件夹的方法
2015/07/06 Python
Python 装饰器使用详解
2017/07/29 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
python连接mongodb密码认证实例
2018/10/16 Python
python交互界面的退出方法
2019/02/16 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
大学生工作推荐信范文
2013/12/02 职场文书
导游实习生自荐书
2014/01/28 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
房地产端午节活动方案
2014/08/24 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang