[js] jQuery 셀 병합

hooni

Views 3492 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
229	Develop	[c] 구조체의 설명과 예제..	hooni	2003.04.23	8373
228	Develop	[c] 구조체/파일 입출력 프로그램	hooni	2003.04.23	7063
227	Develop	[c] 구조체 배열 예제 (학생 성적 계산)	hooni	2013.04.23	7666
226	Develop	[c] 구구단 최단라인 ㅡㅡ;	hooni	2013.04.23	8003
225	Develop	[c] 관계형 연산자에 대한 설명	hooni	2013.04.23	7667
224	Develop	[c] 공용체를 이용해 MSB를 LSB로 변환	hooni	2013.04.23	9375
223	Develop	[c] 격자 직사각형 넓이 구하기	hooni	2013.04.23	7457
222	Develop	[c] 게임 AI FSM 테스트 샘플 소스.. 꽤 괜찮은 소스..	hooni	2013.04.23	7370
221	Develop	[c] 거리와 각도를 입력받아서 좌표로 변환	hooni	2013.04.23	10814
220	Develop	[c] 간단한 채팅(클라이언트/서버) 프로그램 소스	hooni	2003.04.23	9068
219	Develop	[c] 간단한 점 이동 샘플 소스코드	hooni	2013.04.23	6541
218	Develop	[c] 간단한 자료구조(stack, queue, linked list) 구현 소스 6	hooni	2003.04.23	10109

Write

Contents

[js] jQuery 셀 병합

Shortcut

Shortcut

Sign In