用jQuery合并表格中相同文本的相邻单元格
本文转自http://www.cnblogs.com/ly5201314/archive/2009/08/13/1545116.html
已经生成的数据表格大致内容如下:
地区 | 地区 | 商品代码 | 商品名称 | 数量 | 有效期至 | 距效期(月) | 产品批号 | 规格 | 单位 | 条形码 |
---|---|---|---|---|---|---|---|---|---|---|
广东 | 深圳 | 00028 | 红花油 | |||||||
广东 | 深圳 | 00028 | 红花油 | |||||||
广东 | 深圳 | 00028 | 红花油 | |||||||
广东 | 广州 | 00027 | 白花油 | |||||||
广东 | 广州 | 00028 | 红花油 | |||||||
广东 | 深圳 | 00028 | 红花油 | |||||||
广东 | 深圳 | 00028 | 红花油 | |||||||
广东 | 深圳 | 00028 | 红花油 | |||||||
广东 | 深圳 | 00028 | 红花油 |
需要将前四列具有相同文本的相邻单元格进行自动合并,合并后如下:
地区 | 地区 | 商品代码 | 商品名称 | 数量 | 有效期至 | 距效期(月) | 产品批号 | 规格 | 单位 | 条形码 |
---|---|---|---|---|---|---|---|---|---|---|
广东 | 深圳 | 00028 | 红花油 | |||||||
广州 | 00027 | 白花油 | ||||||||
00028 | 红花油 | |||||||||
深圳 | ||||||||||
1、在html的head中引入jQuery
<script language="javascript" type="text/javascript" src="js/jquery-1.2.js"></script>
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);});</body>
</html>
用jQuery合并表格中相同文本的相邻单元格相关推荐
- 使用jquery合并表格中相同文本的相邻单元格
一.效果 二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...
- jQuery: 合并表格中相同文本的相邻单元格
一.效果 二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...
- php相同数据合并单元格,jQuery_基于jQuery的合并表格中相同文本的相邻单元格的代码,ONE
已经生成的数据表格大致 - phpStudy...
基于jQuery的合并表格中相同文本的相邻单元格的代码 ONE 已经生成的数据表格大致内容如下: 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 广东 深圳 ...
- JavaScript合并网页表格中内容相同的相邻单元格
继续编写"圳品"信息系统,我们已经"圳品"信息读取到JavaScript定义的一个中进行按汉语拼音升序作了排序处理. var p = [[100, " ...
- Javascript合并表格中具有相同内容的单元格
HTML或者JSP的TABLE需要不同行但是内容相同的单元格进行合并,本文以省市县为例,对表格中的省市进行二级合并,具体的页面代码和样式不再展示,主要介绍JS如何实现TABLE的单元格合并(无需第三方 ...
- 在Excel表格中如何设置字体随单元格大小变化
在Excel表格中如何设置字体随单元格大小变化 目录 在Excel表格中如何设置字体随单元格大小变化 1.选中单元格,鼠标右键点击"设置单元格式" 2.在"对齐&quo ...
- Excel表格中,上下左右键无法移动单元格怎么办?
excel表格中,上下左右键无法移动单元格,要如何才能使用上下左右键移动单元格,操作方法如下. 1.在excel表格中,发现按键盘的上下左右键无法移动单元格了,鼠标始终还是在定位的单元格上,这是不小心 ...
- matlab中图显示单元格,excel如何根据表格中的数据自动在单元格中画图:
如何利用matlab根据excel表格里面的数据画图 将待的结构的数据录入Excel中,录入意行列要跟原矩阵一一对应 录入完以后保存数据,为了后续使用方便,命名时我们最好把它命名为我们接下来在MATL ...
- 谷歌表格_如何计算Google表格中的空白或空单元格
谷歌表格 When you're analyzing data in a spreadsheet, counting empty or blank cells could help you focus ...
- php 点击 单元格,php – 表格中的contenteditable:选择单元格
我在php中生成一个表.每个单元格都有一个由列名称和行号组成的不同ID. 26/03/201420026/04/2014300 我想通过jQuery记录sql数据库中的更改.为此,我需要向每个单元格添 ...
最新文章
- matlab inviter,水中石
- 姿态检测 树莓派_怎样在树莓派上轻松实现深度学习目标检测?
- 用C语言解“然后是几点”问题
- python图案填充_向imshow Matplotlib添加图案填充
- Jquery的$命名冲突
- cad蜂鸟工具_蜂鸟视图地图数据中台,全面提升商业地产的可视化信息管控
- 【联盛德W806上手笔记】二、GPIO
- linux下目录与文件的权限及特殊权限
- python读取目录里所有txt文件转excel
- 三菱Q系列PLC大型程序Q01U伺服12轴 实际使用中程序
- python字典的key提取_python 字典操作提取key,value
- 计算机管理的显卡驱动,显卡驱动,教您显卡驱动怎么安装
- PDF文件解密安全口令
- 保险公司免费赠送保险可信吗?
- winpe读取linux硬盘数据恢复,Acronis True Image的WinPE恢复媒体中有一个文件管理器,你知道吗?...
- Win10+YOLOv4/v3用yolo_mark标记数据集 训练自己的模型
- 书论49 蔡襄《论书》
- ios 安卓 java_java转android或ios?
- 两相四线步进电机的驱动方法/驱动芯片用法
- 中国焦炭行业发展现状及趋势分析,提高市场集中度「图」
热门文章
- 基于ubuntu的ARM开发环境搭建
- 启动kafka报错ERROR Fatal error during KafkaServer startup. Prepare to shutdown ,找到原因就要可以解决
- html表格背景图片格式,CSS常见样式(二)——列表,背景,边框,行高,表格,vertical-align...
- 站在知乎肩上-做更强的自己(3)
- AtCoder Beginner Contest 258 A~Ex 题解
- 蝙蝠聊天软件显示无法连接服务器失败,蝙蝠聊天软件为什么没有来信息提示音?...
- 五级流水线CPU之低功耗设计 (一) :Bypassing(旁路)
- 光量子计算机技术突破,真正突破光刻机封锁的技术诞生了!可编程光量子计算芯片是什么?...
- 有没有中文域名SSL证书?如何申请
- 《财富》推荐的75本必读书 !!推荐看看!受益匪浅