用jQuery合并表格中相同文本的相鄰單元格

作者: caojin723  來源: csdn  發布時間: 2009-07-12 22:28  閱讀: 3735 次  推薦: 0   原文鏈接   [收藏]  

已經生成的數據表格大致內容如下:

地區 地區 商品代碼 商品名稱 數量 有效期至 距效期(月) 產品批號 規格 單位 條形碼
廣東 深圳 00028 紅花油              
廣東 深圳 00028 紅花油              
廣東 深圳 00028 紅花油              
廣東 廣州 00027 白花油              
廣東 廣州 00028 紅花油              
廣東 深圳 00028 紅花油              
廣東 深圳 00028 紅花油              
廣東 深圳 00028 紅花油              
廣東 深圳 00028 紅花油              

需要將前四列具有相同文本的相鄰單元格進行自動合并,合并后如下:

地區 地區 商品代碼 商品名稱 數量 有效期至 距效期(月) 產品批號 規格 單位 條形碼
廣東 深圳 00028 紅花油              
             
             
廣州 00027 白花油              
00028 紅花油              
深圳              
             
             
             

1、在html的head中引入jQuery

2、添加合并單元格的函數

 

   1. //函數說明:合并指定表格(表格id為_w_table_id)指定列(列數為_w_table_colnum)的相同文本的相鄰單元格  
   2. //參數說明:_w_table_id 為需要進行合并單元格的表格的id。如在HTMl中指定表格 id="data" ,此參數應為 #data   
   3. //參數說明:_w_table_colnum 為需要合并單元格的所在列。為數字,從最左邊第一列為1開始算起。  
   4. function _w_table_rowspan(_w_table_id,_w_table_colnum){  
   5.     _w_table_firsttd = "";  
   6.     _w_table_currenttd = "";  
   7.     _w_table_SpanNum = 0;  
   8.     _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");  
   9.     _w_table_Obj.each(function(i){  
  10.         if(i==0){  
  11.             _w_table_firsttd = $(this);  
  12.             _w_table_SpanNum = 1;  
  13.         }else{  
  14.             _w_table_currenttd = $(this);  
  15.             if(_w_table_firsttd.text()==_w_table_currenttd.text()){  
  16.                 _w_table_SpanNum++;  
  17.                 _w_table_currenttd.hide(); //remove();  
  18.                 _w_table_firsttd.attr("rowSpan",_w_table_SpanNum);  
  19.             }else{  
  20.                 _w_table_firsttd = $(this);  
  21.                 _w_table_SpanNum = 1;  
  22.             }  
  23.         }  
  24.     });   
  25. }  
  26.   
  27. //函數說明:合并指定表格(表格id為_w_table_id)指定行(行數為_w_table_rownum)的相同文本的相鄰單元格  
  28. //參數說明:_w_table_id 為需要進行合并單元格的表格id。如在HTMl中指定表格 id="data" ,此參數應為 #data   
  29. //參數說明:_w_table_rownum 為需要合并單元格的所在行。其參數形式請參考jQuery中nth-child的參數。  
  30. //          如果為數字,則從最左邊第一行為1開始算起。  
  31. //          "even" 表示偶數行  
  32. //          "odd" 表示奇數行  
  33. //          "3n+1" 表示的行數為1、4、7、10.  
  34. //參數說明:_w_table_maxcolnum 為指定行中單元格對應的最大列數,列數大于這個數值的單元格將不進行比較合并。  
  35. //          此參數可以為空,為空則指定行的所有單元格要進行比較合并。  
  36. function _w_table_colspan(_w_table_id,_w_table_rownum,_w_table_maxcolnum){  
  37.     if(_w_table_maxcolnum == void 0){_w_table_maxcolnum=0;}  
  38.     _w_table_firsttd = "";  
  39.     _w_table_currenttd = "";  
  40.     _w_table_SpanNum = 0;  
  41.     $(_w_table_id + " tr:nth-child(" + _w_table_rownum + ")").each(function(i){  
  42.         _w_table_Obj = $(this).children();  
  43.         _w_table_Obj.each(function(i){  
  44.             if(i==0){  
  45.                 _w_table_firsttd = $(this);  
  46.                 _w_table_SpanNum = 1;  
  47.             }else if((_w_table_maxcolnum>0)&&(i>_w_table_maxcolnum)){  
  48.                 return "";  
  49.             }else{  
  50.                 _w_table_currenttd = $(this);  
  51.                 if(_w_table_firsttd.text()==_w_table_currenttd.text()){  
  52.                     _w_table_SpanNum++;  
  53.                     _w_table_currenttd.hide(); //remove();  
  54.                     _w_table_firsttd.attr("colSpan",_w_table_SpanNum);  
  55.                 }else{  
  56.                     _w_table_firsttd = $(this);  
  57.                     _w_table_SpanNum = 1;  
  58.                 }  
  59.             }  
  60.         });  
  61.     });  
  62. }  

3、在html的head中調用合并函數合并單元格

 

 

   1. <script type="text/javascript"><!--  
   2.     $(document).ready(function(){         
   3.         _w_table_rowspan("#spdata",4);  
   4.         _w_table_rowspan("#spdata",3);  
   5.         _w_table_rowspan("#spdata",2);  
   6.         _w_table_rowspan("#spdata",1);  
   7.     });  
   8. // -->  
   9. </script>  

 

0
0
 
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()