[js] jQuery 셀 병합

hooni

Views 4510 Comment 1

Atachment
Attachment '2'

Shortcut

PrevPrev Article

NextNext Article

Larger Font Smaller Font Up Down Go comment Print

Shortcut

PrevPrev Article

NextNext Article

Larger Font Smaller Font Up Down Go comment Print

#중복된 셀을 병합해주는 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 Like 0 Dislike

Facebook Twitter Google Pinterest KakaoStory Band

Up Down Go comment Print

✔Write a comment

Select Editor

✔ Textarea ✔ WYSIWYG

Write a comment

Write with WYSIWYG Close

Comments '1'

?
ㅇㅇ 2017.10.13 22:08

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

Update Delete Comment

Category

List of Articles
No.	Category	Subject	Author	Date	Views
277	Develop	[android] 해상도 관련 팁 (dip -> pixel 변환)	hooni	2013.04.23	16465
276	Etc	여러 대학 및 권위있는 기관 강좌 모음 ㅋㅋ	hooni	2013.06.17	16488
275	Develop	[ios] UI컨트롤러 샘플코드	hooni	2013.08.08	16489
274	Develop	[c] 윈도우 API sin 함수 출력..	hooni	2013.04.23	16532
273	Develop	[erp] SAP 모듈 요약	hooni	2013.04.23	16601
272	System/OS	[owasp] 10대 웹어플리케이션 보안 취약	hooni	2013.04.23	16714
271	System/OS	라우팅 경로 결정 영향 요소 ㅋㅋ	hooni	2013.04.23	16737
270	PPT	[ppt] 웜 과제 진행사항(프레임워크 검증환경 구축) 보고	hooni	2013.04.23	16800
269	Algorithm	[algorithm] Greedy (탐욕 기법)	hooni	2003.04.23	16822
268	System/OS	[linux] 종료와 종료코드 확인(환경변수에서)	hooni	2003.04.23	16903
267	Etc	여기저기서 모은 VoIP(인터넷전화) 자료들~	hooni	2013.04.23	16955
266	Develop	OGNL(Object Graph Navigation Language)	hooni	2013.04.23	16956

Write

Contents

[js] jQuery 셀 병합

Shortcut

Shortcut

Sign In