基于jQuery的合并表格中相同文本的相邻单元格的代码


Posted in Javascript onApril 06, 2011

ONE

已经生成的数据表格大致内容如下:

地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码
广东 深圳 00028 红花油              
广东 深圳 00028 红花油              
广东 深圳 00028 红花油              
广东 广州 00027 白花油              
广东 广州 00028 红花油              
广东 深圳 00028 红花油              
广东 深圳 00028 红花油              
广东 深圳 00028 红花油              
广东 深圳 00028 红花油              

需要将前四列具有相同文本的相邻单元格进行自动合并,合并后如下:

地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码
广东 深圳 00028 红花油              
             
             
广州 00027 白花油              
00028 红花油              
深圳              
             
             
             

1、在html的head中引入jQuery

2、添加合并单元格的函数

//函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格 
//参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #data 
//参数说明:_w_table_colnum 为需要合并单元格的所在列。为数字,从最左边第一列为1开始算起。 
function _w_table_rowspan(_w_table_id,_w_table_colnum){ 
_w_table_firsttd = ""; 
_w_table_currenttd = ""; 
_w_table_SpanNum = 0; 
_w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")"); 
_w_table_Obj.each(function(i){ 
if(i==0){ 
_w_table_firsttd = $(this); 
_w_table_SpanNum = 1; 
}else{ 
_w_table_currenttd = $(this); 
if(_w_table_firsttd.text()==_w_table_currenttd.text()){ 
_w_table_SpanNum++; 
_w_table_currenttd.hide(); //remove(); 
_w_table_firsttd.attr("rowSpan",_w_table_SpanNum); 
}else{ 
_w_table_firsttd = $(this); 
_w_table_SpanNum = 1; 
} 
} 
}); 
} //函数说明:合并指定表格(表格id为_w_table_id)指定行(行数为_w_table_rownum)的相同文本的相邻单元格 
//参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #data 
//参数说明:_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。 
// 如果为数字,则从最左边第一行为1开始算起。 
// "even" 表示偶数行 
// "odd" 表示奇数行 
// "3n+1" 表示的行数为1、4、7、10. 
//参数说明:_w_table_maxcolnum 为指定行中单元格对应的最大列数,列数大于这个数值的单元格将不进行比较合并。 
// 此参数可以为空,为空则指定行的所有单元格要进行比较合并。 
function _w_table_colspan(_w_table_id,_w_table_rownum,_w_table_maxcolnum){ 
if(_w_table_maxcolnum == void 0){_w_table_maxcolnum=0;} 
_w_table_firsttd = ""; 
_w_table_currenttd = ""; 
_w_table_SpanNum = 0; 
$(_w_table_id + " tr:nth-child(" + _w_table_rownum + ")").each(function(i){ 
_w_table_Obj = $(this).children(); 
_w_table_Obj.each(function(i){ 
if(i==0){ 
_w_table_firsttd = $(this); 
_w_table_SpanNum = 1; 
}else if((_w_table_maxcolnum>0)&&(i>_w_table_maxcolnum)){ 
return ""; 
}else{ 
_w_table_currenttd = $(this); 
if(_w_table_firsttd.text()==_w_table_currenttd.text()){ 
_w_table_SpanNum++; 
_w_table_currenttd.hide(); //remove(); 
_w_table_firsttd.attr("colSpan",_w_table_SpanNum); 
}else{ 
_w_table_firsttd = $(this); 
_w_table_SpanNum = 1; 
} 
} 
}); 
}); 
}

3、在html的head中调用合并函数合并单元格
<script type="text/javascript"><!-- 
$(document).ready(function(){ 
_w_table_rowspan("#spdata",4); 
_w_table_rowspan("#spdata",3); 
_w_table_rowspan("#spdata",2); 
_w_table_rowspan("#spdata",1); 
}); 
// --> 
</script>
Javascript 相关文章推荐
jquery高效反选具体实现
May 05 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
javascript实现列表切换效果
May 02 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 #Javascript
jQuery中绑定事件的命名空间详解
Apr 05 #Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 #Javascript
Jquery判断IE6等浏览器的代码
Apr 05 #Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 #Javascript
JQuery中$之选择器用法介绍
Apr 05 #Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 #Javascript
You might like
利用PHP和AJAX创建RSS聚合器的代码
2007/03/13 PHP
php递归列出所有文件和目录的代码
2008/09/10 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
激活 ActiveX 控件
2006/10/09 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
python类定义的讲解
2013/11/01 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python如何实现动态数组
2019/11/02 Python
python:动态路由的Flask程序代码
2019/11/22 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
python线程join方法原理解析
2020/02/11 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
师德师风自我评价范文
2014/09/11 职场文书
政风行风整改报告
2014/11/06 职场文书
2014年维稳工作总结
2014/11/18 职场文书
员工年终考核评语
2014/12/31 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python
python开发制作好看的时钟效果
2022/05/02 Python