基于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 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
vue3种table表格选项个数的控制方法
Apr 14 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
在字符串中把网址改成超级链接
2006/10/09 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
python清除字符串里非字母字符的方法
2015/07/02 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Django框架视图函数设计示例
2019/07/29 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
简单了解django文件下载方式
2020/02/10 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
技术合作协议书范本
2014/04/18 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
2015年公司新年寄语
2014/12/08 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
高中政治教学反思
2016/02/23 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android