用jQuery合并表格中相同文本的相鄰單元格
已經生成的數據表格大致內容如下:
地區 | 地區 | 商品代碼 | 商品名稱 | 數量 | 有效期至 | 距效期(月) | 產品批號 | 規格 | 單位 | 條形碼 |
---|---|---|---|---|---|---|---|---|---|---|
廣東 | 深圳 | 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>
全站熱搜