> 웹 프론트엔드 > JS 튜토리얼 > jquery_jquery를 통해 rowspan과 colspan이 포함된 테이블을 복원하는 구현 방법

jquery_jquery를 통해 rowspan과 colspan이 포함된 테이블을 복원하는 구현 방법

WBOY
풀어 주다: 2016-05-16 17:56:23
원래의
1394명이 탐색했습니다.

요구 사항
rowspan 및 colspan이 포함된 테이블을 복원합니다.
예를 들어 원본 테이블은 다음과 같습니다.

복원된 테이블은 다음과 같습니다.

코드 원리
td의 rowspan 속성 값이 1보다 큰 경우 현재 td의 상위 요소의 형제 요소에 td를 추가합니다. of td가 1보다 큰 경우 현재 td 요소 뒤에 td
코드 복사 를 추가합니다.

// 이 기사의 첫 번째 블로그: http://artwl.cnblogs.com(2012/02/08)jQuery.fn.RevertTable=function(){
$("tr" ,this).each(function(trindex,tritem){
$(tritem).find("td").each(function(tdindex,tditem){
var rowspanCount=$(tditem).attr( "rowspan");
var colspanCount= $(tditem).attr("colspan")
var value=$(tditem).text()
var newtd="" value "";
if(rowspanCount>1){
var parent=$(tditem).parent("tr")[0]
while(rowspanCount--> 1){
$(parent).next().prepend(newtd);
parent=$(parent).next()
}
$(tditem).attr("rowspan ",1);
}
if(colspanCount>1){
while(colspanCount-->1){
$(tditem).after(newtd);
}
$(tditem).attr("colspan ",1);
}
})
}

온라인 데모
http://demo.jb51.net/js /2012/jquery_demo/jquery_rowspan_colspan_table.html
요약
이 문서에서는 rowspan 및 colspan이 포함된 테이블을 복원하는 솔루션 중 하나만 제공합니다. 테스트하고 토론하십시오.
테이블 셀 병합에 대한 코드는 이미 온라인에서 사용할 수 있습니다.
원문 제목: 셀 나누기를 사용하는 jQuery colspan 및 rowspan 테이블
원문 주소: http://willifirulais.blogspot.com/2007/07/ jquery-테이블-열-break.html
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿