;(function($) { // jquery 소스 코드를 살펴본 후 $.fn이 $.prototype임을 알 수 있습니다. jQuery는 이전 버전의 플러그와의 호환성을 위해서만 유지됩니다. -in // 프로토타입의 형태 $.fn.mergeCell = function(options) { return this.each(function() { var cols = options.cols; for ( var i = cols.length - 1; cols[i] != 정의되지 않음; i--) { // 콘솔 디버깅 수정 // console.debug(cols[i]) mergeCell($(this), cols [i]); } dispose($(this)) }) }// 확실히 이해했다면 JavaScript의 클로저와 범위 개념 중 내부적으로 사용되는 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와 해당 행 범위를 찾는 것입니다. $('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() // 마지막 줄의 상황은 조금 특별합니다 // 예를 들어 마지막 두 줄의 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); } } }) } // 메모리 정리 함수 function dispose($table) { $table.removeData(); } })(jQuery)
주요 지침 코드는 비교적 간단하지만 아직 개선이 필요한 부분이 있습니다
•처리할 테이블 내용은 tbody부터 검색됩니다. 경우에는 보다 일반적인 해결 방법이 제공되어야 합니다. 🎜 >•for ( var i = cols.length - 1; cols[i] != undefine; i--)... 테이블 데이터의 양이 많고 처리되는 열이 많은 경우 여기에서 최적화하지 못하면 다음이 발생합니다. 브라우저 문제 스레드 차단 위험이 있으므로 setTimeout 사용을 고려해 볼 수 있습니다 • 개선할 가치가 있는 다른 부분도 많고, 많이 있어야 한다고 생각합니다
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
