基于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实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
jquery 图片轮换效果
Jul 29 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
JS随机漂浮广告代码具体实例
Nov 19 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
js倒计时简单实现代码
Aug 11 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
JS一个简单的注册页面实例
Sep 05 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 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
生成缩略图
2006/10/09 PHP
phpinfo 系统查看参数函数代码
2009/06/05 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
详解Python中用于计算指数的exp()方法
2015/05/14 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
学生实习推荐信范文
2013/11/26 职场文书
新闻记者个人求职的自我评价
2013/11/28 职场文书
办公室主任先进事迹
2014/01/18 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python