用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）相同列中的相同文本的相鄰儲存格<br />// 多於一列時，後一列的儲存格合并範圍不能超過前一列的合并範圍。避免出現交錯。<br />//參數說明：_w_table_id 為需要進行合併儲存格的表格id。如在HTMl中指定表格 id="data" ，此參數應為 #data<br />//參數說明：_w_table_mincolnum 為需要進行比較合并的起始列數。為數字，則從最左邊第一行為1開始算起。<br />// 此參數可以為空白，為空白則第一列為起始列。<br />// 需要注意，如果第一列為序號列，則需要排除此列。<br />//參數說明：_w_table_maxcolnum 為需要進行比較合并的最大列數，列數大於這個數值的儲存格將不進行比較合并。<br />// 為數字，從最左邊第一列為1開始算起。<br />// 此參數可以為空白，為空白則同_w_table_mincolnum。<br />function _w_table_lefttitle_rowspan(_w_table_id,_w_table_mincolnum,_w_table_maxcolnum){<br /> if(_w_table_mincolnum == void 0){_w_table_mincolnum=1;}<br /> if(_w_table_maxcolnum == void 0){_w_table_maxcolnum=_w_table_mincolnum;}<br /> if(_w_table_mincolnum>_w_table_maxcolnum){<br /> return "";<br /> }else{<br /> var _w_table_splitrow=new Array();<br /> for(iLoop=_w_table_mincolnum;iLoop<=_w_table_maxcolnum;iLoop++){<br /> _w_table_onerowspan(iLoop);<br /> }<br /> }</p><p> function _w_table_onerowspan(_w_table_colnum){<br /> _w_table_firstrow = 0;//前一列合并區塊第一行<br /> _w_table_SpanNum = 0;//合併儲存格時的，儲存格Span個數<br /> _w_table_splitNum = 0;//數組的_w_table_splitrow的當前元素下標<br /> _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");<br /> _w_table_curcol_rownum = _w_table_Obj.length-1;//此列最後一行行數<br /> if(_w_table_splitrow.length==0){_w_table_splitrow[0] = _w_table_curcol_rownum;}<br /> _w_table_lastrow = _w_table_splitrow[0];//前一列合并區塊最後一行<br /> var _w_table_firsttd;<br /> var _w_table_currenttd;<br /> var _w_table_curcol_splitrow=new Array();<br /> _w_table_Obj.each(function(i){<br /> if(i==_w_table_firstrow){<br /> _w_table_firsttd = $(this);<br /> _w_table_SpanNum = 1;<br /> }else{<br /> _w_table_currenttd = $(this);<br /> if(_w_table_firsttd.text()==_w_table_currenttd.text()){<br /> _w_table_SpanNum++;<br /> _w_table_currenttd.hide(); //remove();<br /> _w_table_firsttd.attr("rowSpan",_w_table_SpanNum);<br /> }else{<br /> _w_table_firsttd = $(this);<br /> _w_table_SpanNum = 1;<br /> setTableRow(i-1);<br /> }<br /> if(i==_w_table_lastrow){setTableRow(i);}<br /> }<br /> function setTableRow(_splitrownum){<br /> if(_w_table_lastrow<=_splitrownum&&_w_table_splitNum++<_w_table_splitrow.length){<br /> //_w_table_firstrow=_w_table_lastrow+1;<br /> _w_table_lastrow=_w_table_splitrow[_w_table_splitNum];<br /> }<br /> _w_table_curcol_splitrow[_w_table_curcol_splitrow.length]=_splitrownum;<br /> if(i<_w_table_curcol_rownum){_w_table_firstrow=_splitrownum+1;}<br /> }<br /> });<br /> _w_table_splitrow=_w_table_curcol_splitrow;<br /> }<br />}

 

3、在html的head中調用合并函數合併儲存格

<script type="text/javascript"><!--<br /> $(document).ready(function(){<br /> _w_table_lefttitle_rowspan("#spdata",2,5);<br /> }); </body><br /></html>