基于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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
JQuery datepicker 使用方法
May 20 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
微信小程序实现简单的select下拉框
Nov 23 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
PHP获取url的函数代码
2011/08/02 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
实例解析Array和String方法
2016/12/14 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
Python算术运算符实例详解
2017/05/31 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
python生成特定分布数的实例
2019/12/05 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
Django缓存Cache使用详解
2020/11/30 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
美的官方商城:Midea
2016/09/14 全球购物
生产车间主管岗位职责
2013/12/28 职场文书
知识竞赛主持词
2014/03/26 职场文书
解析MySQL binlog
2021/06/11 MySQL
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记