用jQuery合并表格中相同文本的相邻单元格(二)

原文地址：http://www.cnblogs.com/ly5201314/archive/2009/08/13/1545126.html

 

在前面的文章《用jQuery合并表格中相同文本的相邻单元格 》中讲到可以用jQuery合并同列中相同文本的相邻单元格。

序号	地区	地区	商品代码	商品名称	数量	有效期至	距效期（月）	产品批号	规格	单位	条形码
1	广东	深圳	00028	红花油
2	广东	深圳	00028	红花油
3	广东	深圳	00028	红花油
4	广东	广州	00027	白花油
5	广东	广州	00028	红花油
6	广东	深圳	00028	红花油
7	广东	深圳	00028	红花油
8	广东	深圳	00028	红花油
9	广东	深圳	00028	红花油

 

对于上面的表格，采用文章中的 _w_table_rowspan 函数进行单元格合并。合并后的结果如下：

序号	地区	地区	商品代码	商品名称	数量	有效期至	距效期（月）	产品批号	规格	单位	条形码
1	广东	深圳	00028	红花油
2
3
4		广州	00027	白花油
5			00028	红花油
6		深圳
7
8
9

 

合并结果中第5行 00028 红花油 和下面几行相同文本的内容一起合并了。但是对于这种表格，我们需要把表格前面的列的合并单元格看做是后一列单元格合并的限定范围。所以后一列的合并单元格边界不应该超过前一列的合并单元格边界。

    合并后的正确结果应该如下表：

序号	地区	地区	商品代码	商品名称	数量	有效期至	距效期（月）	产品批号	规格	单位	条形码
1	广东	深圳	00028	红花油
2
3
4		广州	00027	白花油
5			00028	红花油
6		深圳	00028	红花油
7
8
9

 

1、在html的head中引入jQuery

<mce:script language="javascript" type="text/javascript" src="js/jquery-1.3.js" mce_src="js/jquery-1.3.js"></mce: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); }); </body> </html>