[js] jQuery 셀 병합

hooni

Views 3567 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
685	Develop	[c/c++] Makefile 사용하기.. ㅋㅋ	hooni	2003.04.23	7389
684	Develop	[js] 초간단 암호화/복호화 소스..	hooni	2003.04.23	8881
683	Develop	[c]디렉토리 탐색	hooni	2003.04.23	7339
682	Develop	[c] 함수 요약 (검색해서 쓰세요..)	hooni	2003.04.23	8834
681	Develop	[c] 파일(File) 관련 함수 샘플 코드	hooni	2003.04.23	7485
680	Develop	[c] 패스워드 암호화/사용자 정보 보기	hooni	2003.04.23	7042
679	Develop	[c] 파일 복사(copy) 프로그램 샘플 소스	hooni	2003.04.23	6821
678	Develop	[c] UCP/TCP 채팅 소스 - 정리해야 함..	hooni	2003.04.23	7947
677	Develop	[c] IP 스푸핑(ip spoof) 소스 - 정리해야 함	hooni	2003.04.23	7577
676	Develop	[c] 시스템공학 레포트 (pass1, pass2)	hooni	2003.04.23	7203
675	Develop	[c] 레포트용으로 제출했던 여러 소스코드 모음	hooni	2003.04.23	8119
674	Develop	[c] 심심해서.. fseek() 예제..	hooni	2003.04.23	7254

Write

Contents

[js] jQuery 셀 병합

Shortcut

Shortcut

Sign In