[js] jQuery 셀 병합

hooni

조회 수 3486 댓글 1

Atachment
첨부 '2'

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄

#중복된 셀을 병합해주는 js

#HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>table rowspan with jQuery</title>
</head>
<body>
  <h1>원하는 row 중복데이터 셀병합</h1>
<table id="forRowspan">
  <thead>
    <tr>
      <th>제목</th>
      <th>제목</th>
      <th>제목</th>
      <th>제목</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr>
      <td>a</td>
      <td>2</td>
      <td>3</td>
      <td>d</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>c</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>c</td>
      <td>a</td>
    </tr>
  </tbody>
</table>
  <p>License : MIT (shj at xenosi.de)</p>
</body>
</html>

#CSS

#forRowspan {
  border-collapse:collapse;
  border:1px solid black;
}

#forRowspan th, #forRowspan td {
  border:1px solid gray;
}

#JS

$(function(){
	$('#forRowspan').each(function() {
		var table = this;
		$.each([2,3,4] /* 합칠 칸 번호 */, function(c, v) {
			var tds = $('>tbody>tr>td:nth-child(' + v + ')', table).toArray();
            var i = 0, j = 0;
			for(j = 1; j < tds.length; j ++) {
				if(tds[i].innerHTML != tds[j].innerHTML) {
					$(tds[i]).attr('rowspan', j - i);
					i = j;
					continue;
				}
				$(tds[j]).hide();
			}
			j --;
			if(tds[i].innerHTML == tds[j].innerHTML) {
				$(tds[i]).attr('rowspan', j - i + 1);
			}
		});
	});
});

#Output

[출처] http://jsbin.com/kurawalunobu/1/edit

0 추천 0 비추천

Facebook Twitter Google Pinterest KakaoStory Band

위로 아래로 댓글로 가기 인쇄

✔댓글 쓰기

에디터 선택하기

✔ 텍스트 모드 ✔ 에디터 모드

댓글 쓰기

에디터 사용하기 닫기

Comments '1'

?
ㅇㅇ 2017.10.13 22:08

빈 공간은 제외하려면 어떻게 해야하나요?

수정 삭제 댓글

Category

List of Articles
번호	분류	제목	글쓴이	날짜	조회 수
921	Etc	[doc] 웜 프레임워크 검증환경 구축(작성중..)	hooni	2013.04.23	16011
920	Etc	여기저기서 모은 VoIP(인터넷전화) 자료들~	hooni	2013.04.23	15964
919	Etc	티스토리 테이블 html,css 구문	hooni	2013.11.03	15941
918	System/OS	[owasp] 10대 웹어플리케이션 보안 취약	hooni	2013.04.23	15903
917	System/OS	[linux] 패킷 스니퍼링	hooni	2003.04.23	15897
916	PPT	[ppt] 웜 과제 진행사항(프레임워크 검증환경 구축) 보고	hooni	2013.04.23	15892
915	System/OS	라우팅 경로 결정 영향 요소 ㅋㅋ	hooni	2013.04.23	15848
914	Develop	OGNL(Object Graph Navigation Language)	hooni	2013.04.23	15723
913	Etc	영어의 12 시제 (The twelve tenses of English)	hooni	2013.07.12	15697
912	Develop	[ios] APNS 클라이언트 구현 (pdf)	hooni	2013.06.27	15685
911	System/OS	[router] 설정과 기본 명령어들 모음	hooni	2013.04.23	15669
910	Develop	[c] 윈도우 API sin 함수 출력..	hooni	2013.04.23	15664

쓰기

Contents

[js] jQuery 셀 병합

단축키

단축키

로그인