jquery 기반 통합 table 같은 셀 의 플러그 인(간소화 판)

효 과 는 다음 과 같다.
원본 표:
col0
col1
col2
col3
SuZhou
11111
22222
SuZhouCity
SuZhou
33333
44444
SuZhouCity
SuZhou
55555
66666
SuZhouCity
ShangHai
77777
88888
ShangHaiCity
ShangHai
uuuuu
hhhhh
ShangHaiCity
ShangHai
ggggg
ccccc
ShangHaiCity
GuangZhou
ttttt
eeeee
GuangZhouCity
GuangZhou
ppppp
qqqqq
GuangZhouCity
처리 후의 모습:
col0
col1
col2
col3
SuZhou
11111
22222
SuZhouCity
33333
44444
55555
66666
ShangHai
77777
88888
ShangHaiCity
uuuuu
hhhhh
ggggg
ccccc
GuangZhou
ttttt
eeeee
GuangZhouCity
ppppp
qqqqq
효과 가 나 오 면 간단 해 보 입 니 다.다음 페이지

<table id="process" cellpadding="2" cellspacing="0" border="1"> 
<thead> 
<tr > 
<td>col0</td> 
<td>col1</td> 
<td>col2</td> 
<td>col3</td> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>SuZhou</td> 
<td>11111</td> 
<td>22222</td> 
<td>SuZhouCity</td> 
</tr> 
<tr> 
<td>SuZhou</td> 
<td>33333</td> 
<td>44444</td> 
<td>SuZhouCity</td> 
</tr> 
<tr> 
<td>SuZhou</td> 
<td>55555</td> 
<td>66666</td> 
<td>SuZhouCity</td> 
</tr> 
<tr> 
<td>ShangHai</td> 
<td>77777</td> 
<td>88888</td> 
<td>ShangHaiCity</td> 
</tr> 
<tr> 
<td>ShangHai</td> 
<td>uuuuu</td> 
<td>hhhhh</td> 
<td>ShangHaiCity</td> 
</tr> 
<tr> 
<td>ShangHai</td> 
<td>ggggg</td> 
<td>ccccc</td> 
<td>ShangHaiCity</td> 
</tr> 
<tr> 
<td>GuangZhou</td> 
<td>ttttt</td> 
<td>eeeee</td> 
<td>GuangZhouCity</td> 
</tr> 
<tr> 
<td>GuangZhou</td> 
<td>ppppp</td> 
<td>qqqqq</td> 
<td>GuangZhouCity</td> 
</tr> 
</tbody> 
</table> 

의 핵심 코드 를 먼저 보 겠 습 니 다.

 
//        jquery      
$('#process').mergeCell({ 
//     cols       ,          , 0   
//           (  )        
cols: [0, 3] 
}); 

아래 에 이 작은 플러그 인의 전체 코드 를 보 겠 습 니 다.

 
;(function($) { 
//   jquery       $.fn  $.prototype,               
//     jQuery.prototype     
$.fn.mergeCell = function(options) { 
return this.each(function() { 
var cols = options.cols; 
for ( var i = cols.length - 1; cols[i] != undefined; i--) { 
// fixbug console   
// console.debug(cols[i]); 
mergeCell($(this), cols[i]); 
} 
dispose($(this)); 
}); 
}; 
//    javascript closure scope      ,           private   
//                      
function mergeCell($table, colIndex) { 
$table.data('col-content', ''); //         
$table.data('col-rowspan', 1); //      rowspan     1 
$table.data('col-td', $()); //                   td(jQuery    ),     " " jquery   
$table.data('trNum', $('tbody tr', $table).length); //          ,                    
//           "  "        col-td,      rowspan 
$('tbody tr', $table).each(function(index) { 
// td:eq  colIndex     
var $td = $('td:eq(' + colIndex + ')', this); 
//            
var currentContent = $td.html(); 
//          
if ($table.data('col-content') == '') { 
$table.data('col-content', currentContent); 
$table.data('col-td', $td); 
} else { 
//             
if ($table.data('col-content') == currentContent) { 
//             col-rowspan  ,      
var rowspan = $table.data('col-rowspan') + 1; 
$table.data('col-rowspan', rowspan); 
//            $td.remove()              
$td.hide(); 
//               
//     2  td        ,               col-td    td  rowspan 
if (++index == $table.data('trNum')) 
$table.data('col-td').attr('rowspan', $table.data('col-rowspan')); 
} else { //             
// col-rowspan   1,       col-rowspan    ,     
if ($table.data('col-rowspan') != 1) { 
$table.data('col-td').attr('rowspan', $table.data('col-rowspan')); 
} 
//             td,     ,   col-rowspan 
$table.data('col-td', $td); 
$table.data('col-content', $td.html()); 
$table.data('col-rowspan', 1); 
} 
} 
}); 
} 
//     private          
function dispose($table) { 
$table.removeData(); 
} 
})(jQuery); 

주요 설명 은 주석 에 있 을 것 입 니 다.코드 는 확실히 간단 합 니 다.예 를 들 어 개선 해 야 할 부분 이 있 습 니 다.처 리 된 table 내용 은 tbody 부터 찾 았 습 니 다.tbody 가 없 으 면...그럼 좀 더 유 니 버 설 화 된 방안 을 제시 해 야 합 니 다.for(var i=cols.length-1;cols[i] != undefined; i-)...표 의 데이터 양 이 많 고 처리 하 는 열 도 많 습 니 다.여기 서 최적화 하지 않 으 면 브 라 우 저 스 레 드 가 막 힐 위험 이 있 습 니 다.setTimeout•다른 개선 할 만 한 것 을 고려 할 수 있 습 니 다.적지 않 을 것 이 라 고 생각 합 니 다.