jquery(라이트 버전)_jquery를 기반으로 테이블의 동일한 셀을 병합하기 위한 플러그인

效果如下

原表格:

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

效果出来, 看上去比较简单, 下面先看下页面

复主代码 代码如下:

<머리>



























































核心代码:

复主代码 代码如下:

// 这里写成了一个jquery插件式
$('#process').mergeCell({
// 目前只有cols这么一个配置项, 用数组表示列的索引,从0开ㅋㅋㅋ
// 然后根据指定列来处理(합并)상동内容单원格
cols: [0, 3]
});

下side看看这个小插件的完整代码:

复主代码 代码如下:

;(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 사용을 고려해 볼 수 있습니다
• 개선할 가치가 있는 다른 부분도 많고, 많이 있어야 한다고 생각합니다

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

더보기

인기 기사

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

3 몇 주 전 By DDD

Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법

2 몇 주 전 By DDD

Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다

3 몇 주 전 By DDD

<s> : 데드 레일 - 모든 도전을 완료하는 방법

4 몇 주 전 By DDD

Atomfall Guide : 항목 위치, 퀘스트 가이드 및 팁

4 몇 주 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7651

15

Cakephp 튜토리얼

1392

52

Steam의 계정 이름 형식은 무엇입니까?

91

11

Win11 활성화 키 영구

73

19

NYT 미니 크로스 워드 답변

36

110

더보기

Related knowledge

Excel에서 하나 이상의 수식 참조에 대한 문제를 발견했습니다. 해결 방법 Apr 17, 2023 pm 06:58 PM

오류 검사 도구 사용 Excel 스프레드시트에서 오류를 찾는 가장 빠른 방법 중 하나는 오류 검사 도구를 사용하는 것입니다. 도구에서 오류가 발견되면 오류를 수정하고 파일을 다시 저장해 보세요. 그러나 이 도구는 모든 유형의 오류를 찾지 못할 수도 있습니다. 오류 검사 도구가 오류를 찾지 못하거나 오류를 수정해도 문제가 해결되지 않으면 아래의 다른 수정 사항 중 하나를 시도해야 합니다. Excel에서 오류 검사 도구를 사용하려면: 수식 탭을 선택하세요. 오류 검사 도구를 클릭합니다. 오류가 발견되면 오류 원인에 대한 정보가 도구에 표시됩니다. 필요하지 않은 경우 오류를 수정하거나 문제를 일으키는 수식을 삭제하세요. 오류 검사 도구에서 다음을 클릭하여 다음 오류를 확인하고 프로세스를 반복합니다. 그렇지 않을 때

Google 스프레드시트에서 인쇄 영역을 어떻게 설정하나요? May 08, 2023 pm 01:28 PM

인쇄 미리보기에서 GoogleSheets 인쇄 영역을 설정하는 방법 Google Sheets를 사용하면 세 가지 다른 인쇄 영역이 있는 스프레드시트를 인쇄할 수 있습니다. 생성한 각 개별 워크시트를 포함하여 전체 스프레드시트를 인쇄하도록 선택할 수 있습니다. 또는 개별 워크시트를 인쇄하도록 선택할 수도 있습니다. 마지막으로 선택한 셀의 일부만 인쇄할 수 있습니다. 이론적으로는 인쇄할 개별 셀을 선택할 수 있으므로 생성할 수 있는 가장 작은 인쇄 영역입니다. 가장 쉬운 설정 방법은 내장된 Google 스프레드시트 인쇄 미리보기 메뉴를 사용하는 것입니다. PC, Mac 또는 Chromebook의 웹 브라우저에서 Google 스프레드시트를 사용하여 이 콘텐츠를 볼 수 있습니다. Google을 설정하려면

Excel 워크시트에 PDF 문서를 포함하는 방법 May 28, 2023 am 09:17 AM

일반적으로 PDF 문서를 Excel 워크시트에 삽입해야 합니다. 회사의 프로젝트 목록과 마찬가지로 텍스트와 문자 데이터를 Excel 셀에 즉시 추가할 수 있습니다. 하지만 특정 프로젝트에 대한 솔루션 디자인을 해당 데이터 행에 첨부하려면 어떻게 해야 할까요? 글쎄, 사람들은 종종 멈춰서 생각합니다. 때로는 해결책이 간단하지 않기 때문에 생각도 효과가 없을 때가 있습니다. 매우 구체적인 데이터 행과 함께 여러 PDF 문서를 Excel 워크시트에 쉽게 삽입하는 방법을 알아보려면 이 문서를 자세히 살펴보세요. 예제 시나리오 이 문서에 표시된 예제에는 각 셀에 프로젝트 이름을 나열하는 ProductCategory라는 열이 있습니다. 다른 열 ProductSpeci

복사할 수 없는 셀 형식이 너무 많으면 어떻게 해야 합니까? Mar 02, 2023 pm 02:46 PM

복사할 수 없는 셀 형식이 너무 많다는 문제에 대한 해결 방법: 1. EXCEL 문서를 열고 여러 셀에 다양한 형식의 내용을 입력합니다. 2. 왼쪽 상단에서 "Format Painter" 버튼을 찾습니다. Excel 페이지에서 ""Format Painter" 옵션을 클릭합니다. 3. 마우스 왼쪽 버튼을 클릭하여 형식이 일관되도록 설정합니다.

Excel에서 난수 생성기를 만드는 방법 Apr 14, 2023 am 09:46 AM

RANDBETWEEN을 사용하여 Excel에서 난수를 생성하는 방법 특정 범위 내에서 난수를 생성하려는 경우 RANDBETWEEN 함수를 사용하면 빠르고 쉽게 수행할 수 있습니다. 이를 통해 선택한 두 값 사이에서 임의의 정수를 생성할 수 있습니다. RANDBETWEEN을 사용하여 Excel에서 난수 생성: 첫 번째 난수를 표시할 셀을 클릭합니다. =RANDBETWEEN(1,500)을 입력하여 "1"을 생성하려는 가장 낮은 난수로 바꾸고 "500"을

Excel의 숫자 및 텍스트 값에서 쉼표를 제거하는 방법 Apr 17, 2023 pm 09:01 PM

숫자 값, 텍스트 문자열에서 잘못된 위치에 쉼표를 사용하면 심지어 가장 큰 Excel 전문가에게도 짜증나는 일이 될 수 있습니다. 쉼표를 없애는 방법을 알고 있을 수도 있지만, 알고 있는 방법은 시간이 많이 걸릴 수 있습니다. 문제가 무엇이든 Excel 워크시트의 잘못된 위치에 있는 쉼표와 관련된 경우 한 가지만 말씀드릴 수 있습니다. 모든 문제는 오늘 바로 여기에서 해결될 것입니다! 가능한 가장 간단한 단계로 숫자와 텍스트 값에서 쉼표를 쉽게 제거하는 방법을 알아보려면 이 기사를 더 자세히 살펴보세요. 즐겁게 읽으시기 바랍니다. 아, 그리고 어떤 방법이 가장 눈길을 끄는지 알려주는 것도 잊지 마세요! 섹션 1: 숫자 값에서 쉼표를 제거하는 방법 숫자 값에 쉼표가 포함된 경우 두 가지 상황이 발생할 수 있습니다.

Excel에서 병합된 셀을 찾고 삭제하는 방법 Apr 20, 2023 pm 11:52 PM

Windows용 Excel에서 병합된 셀을 찾는 방법 데이터에서 병합된 셀을 삭제하려면 먼저 해당 셀을 모두 찾아야 합니다. Excel의 찾기 및 바꾸기 도구를 사용하면 쉽게 이 작업을 수행할 수 있습니다. Excel에서 병합된 셀 찾기: 병합된 셀을 찾으려는 셀을 강조 표시합니다. 모든 셀을 선택하려면 스프레드시트 왼쪽 상단의 빈 공간을 클릭하거나 Ctrl+A를 누르세요. 홈 탭을 클릭합니다. 찾기 및 선택 아이콘을 클릭합니다. 찾기를 선택합니다. 옵션 버튼을 클릭하세요. FindWhat 설정이 끝나면 형식을 클릭합니다. 정렬 탭에서 셀 병합을 클릭합니다. 한 줄이 아닌 확인 표시가 포함되어야 합니다. 확인을 클릭하여 형식을 확인하세요.

Excel에서 선행 0이 제거되지 않도록 하는 방법 Feb 29, 2024 am 10:00 AM

Excel 통합 문서에서 선행 0을 자동으로 제거하는 것이 불편합니까? 셀에 숫자를 입력하면 Excel에서 숫자 앞의 0을 제거하는 경우가 많습니다. 기본적으로 명시적인 서식이 없는 셀 항목은 숫자 값으로 처리됩니다. 선행 0은 일반적으로 숫자 형식과 관련이 없는 것으로 간주되므로 생략됩니다. 또한 앞에 0이 있으면 특정 수치 연산에서 문제가 발생할 수 있습니다. 따라서 0은 자동으로 제거됩니다. 이 문서에서는 계좌 번호, 우편 번호, 전화 번호 등과 같이 입력된 숫자 데이터가 올바른 형식인지 확인하기 위해 Excel에서 앞에 오는 0을 유지하는 방법을 설명합니다. Excel에서 숫자 앞에 0이 있도록 허용하는 방법은 무엇입니까? Excel 통합 문서에서 숫자의 앞에 오는 0을 유지할 수 있으며 선택할 수 있는 방법은 여러 가지가 있습니다. 다음과 같이 셀을 설정할 수 있습니다.

See all articles

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개 부인 성명 Sitemap

© php.cn All rights reserved

col0	col1	col2	col3
쑤저우	11111	22222	쑤저우시
쑤저우	33333	44444	쑤저우시
쑤저우	55555	66666	쑤저우시
상하이	77777	88888	상하이시
상하이	uuuuu	오오오오오	상하이시
상하이	ggggg	ccccc	상하이시
광저우	ttttt	아아아아	광저우시
광저우	ppppp	qqqqq	광저우시