用jQuery合并表格中左侧表头同列相同文本的相邻单元格
来源:互联网 发布:网络基础建设 编辑:程序博客网 时间:2024/05/22 03:29
在前面的文章《用jQuery合并表格中相同文本的相邻单元格》中讲到可以用jQuery合并同列中相同文本的相邻单元格。序号 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 1广东深圳00028红花油 2广东深圳00028红花油 3广东深圳00028红花油 4广东广州00027白花油 5广东广州00028红花油 6广东深圳00028红花油 7广东深圳00028红花油 8广东深圳00028红花油 9广东深圳00028红花油 序号 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 1广东深圳00028红花油 2 3 4广州00027白花油 500028红花油 6深圳 7 8 9 序号 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 1广东深圳00028红花油 2 3 4广州00027白花油 500028红花油 6深圳00028红花油 7 8 9
对于上面的表格,采用文章中的 _w_table_rowspan 函数进行单元格合并。合并后的结果如下:
合并结果中第5行 00028 红花油 和下面几行相同文本的内容一起合并了。但是对于这种表格,我们需要把表格前面的列的合并单元格看做是后一列单元格合并的限定范围。所以后一列的合并单元格边界不应该超过前一列的合并单元格边界。
合并后的正确结果应该如下表:
1、在html的head中引入jQuery
- <script language="javascript" type="text/javascript" src="js/jquery-1.3.js"></script>
2、添加合并单元格的函数
- //函数说明:合并指定表格(表格id为_w_table_id)指定列(行数大于_w_table_mincolnum 小于_w_table_maxcolnum)相同列中的相同文本的相邻单元格
- // 多于一列时,后一列的单元格合并范围不能超过前一列的合并范围。避免出现交错。
- //参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #data
- //参数说明:_w_table_mincolnum 为需要进行比较合并的起始列数。为数字,则从最左边第一行为1开始算起。
- // 此参数可以为空,为空则第一列为起始列。
- // 需要注意,如果第一列为序号列,则需要排除此列。
- //参数说明:_w_table_maxcolnum 为需要进行比较合并的最大列数,列数大于这个数值的单元格将不进行比较合并。
- // 为数字,从最左边第一列为1开始算起。
- // 此参数可以为空,为空则同_w_table_mincolnum。
- function _w_table_lefttitle_rowspan(_w_table_id,_w_table_mincolnum,_w_table_maxcolnum){
- if(_w_table_mincolnum == void 0){_w_table_mincolnum=1;}
- if(_w_table_maxcolnum == void 0){_w_table_maxcolnum=_w_table_mincolnum;}
- if(_w_table_mincolnum>_w_table_maxcolnum){
- return "";
- }else{
- var _w_table_splitrow=new Array();
- for(iLoop=_w_table_mincolnum;iLoop<=_w_table_maxcolnum;iLoop++){
- _w_table_onerowspan(iLoop);
- }
- }
- function _w_table_onerowspan(_w_table_colnum){
- _w_table_firstrow = 0;//前一列合并区块第一行
- _w_table_SpanNum = 0;//合并单元格时的,单元格Span个数
- _w_table_splitNum = 0;//数组的_w_table_splitrow的当前元素下标
- _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");
- _w_table_curcol_rownum = _w_table_Obj.length-1;//此列最后一行行数
- if(_w_table_splitrow.length==0){_w_table_splitrow[0] = _w_table_curcol_rownum;}
- _w_table_lastrow = _w_table_splitrow[0];//前一列合并区块最后一行
- var _w_table_firsttd;
- var _w_table_currenttd;
- var _w_table_curcol_splitrow=new Array();
- _w_table_Obj.each(function(i){
- if(i==_w_table_firstrow){
- _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;
- setTableRow(i-1);
- }
- if(i==_w_table_lastrow){setTableRow(i);}
- }
- function setTableRow(_splitrownum){
- if(_w_table_lastrow<=_splitrownum&&_w_table_splitNum++<_w_table_splitrow.length){
- //_w_table_firstrow=_w_table_lastrow+1;
- _w_table_lastrow=_w_table_splitrow[_w_table_splitNum];
- }
- _w_table_curcol_splitrow[_w_table_curcol_splitrow.length]=_splitrownum;
- if(i<_w_table_curcol_rownum){_w_table_firstrow=_splitrownum+1;}
- }
- });
- _w_table_splitrow=_w_table_curcol_splitrow;
- }
- }
3、在html的head中调用合并函数合并单元格
- <script type="text/javascript"><!--
- $(document).ready(function(){
- _w_table_lefttitle_rowspan("#spdata",2,5);
- });
- // -->
- </script>
- 转:http://blog.csdn.net/caojin723/article/details/3880710
0 0
- 用jQuery合并表格中左侧表头同列相同文本的相邻单元格
- 用jQuery合并表格中左侧表头同列相同文本的相邻单元格
- 用jQuery合并表格中相同文本的相邻单元格
- 用jQuery合并表格中相同文本的相邻单元格
- 用jQuery合并表格中相同文本的相邻单元格
- 用jQuery合并表格中相同文本的相邻单元格
- 用jQuery合并表格中相同文本的相邻单元格
- jquery合并表格中相同文本的相邻单元格
- jquery合并表格中相同文本的相邻单元格
- 用jQuery合并表格中相同文本的相邻单元格(一)
- 用jQuery合并表格中相同文本的相邻单元格(二)
- 用Javascript合并指定表格相同文本的相邻单元格
- jquery合并单元格(表格相邻列内容相同合并)
- GridView、DataGrid 表头合并、表体合并[合并相邻行相同数据的单元格
- jquery 合并相邻且内容相同单元格
- DataGridView 合并同一列中值相同的相邻单元格 合并单元格
- EXCEL中合并同列中连续相同内容的单元格
- GridView中2列表头合并,同列相同值的表格合并
- IIS error 503
- IOS启动动画(广告)
- Python optionParser模块的使用方法
- Go Exercise: Equivalent Binary Trees
- 二进制与三进制在it笔试面试中的妙用
- 用jQuery合并表格中左侧表头同列相同文本的相邻单元格
- 开启thinkphp的调试功能
- Hadoop 2.2.0 单节点安装
- ThinkPHP“非法操作”的处理方法
- vim 剪贴板
- CListCtrl控件主要事件及LVN_ITEMCHANGED消息和鼠标双击列表项事件的处理
- OFBIZ分享:产品分类之BEST SELLING (最好销售的分类)
- iOS开发之压缩与解压文件
- 解决Nginx部署ThinkPHP