基于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 相关文章推荐
javascript 关闭IE6、IE7
Jun 01 Javascript
JS 控制CSS样式表
Aug 20 Javascript
JS 参数传递的实际应用代码分析
Sep 13 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
vue中使用vue-print.js实现多页打印
Mar 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
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
用javascript实现倒计时效果
2021/02/09 Javascript
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
Python模块搜索路径代码详解
2018/01/29 Python
python安装twisted的问题解析
2018/08/21 Python
Django forms组件的使用教程
2018/10/08 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
机械专业毕业生自荐信
2013/11/02 职场文书
房地产财务管理制度
2014/02/02 职场文书
文秘大学生求职信
2014/02/25 职场文书
劲霸男装广告词
2014/03/21 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书