[js] jQuery 셀 병합

hooni

Views 3490 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	2013.04.23	6633
228	Develop	[c] 웅지학원 NAT를 소스코드로..	hooni	2013.04.23	6611
227	Develop	[c] 간단한 점 이동 샘플 소스코드	hooni	2013.04.23	6541
226	Develop	[c] 민수형 소스(도메인소켓포함)	hooni	2013.04.23	6522
225	Develop	[js] 새로고침(refresh)방법과 다른 페이지 바꾸기..	hooni	2003.04.23	6521
224	Develop	[c] 네트워크 보안 프로그래밍 과제 (Server,Agent,Client)	hooni	2013.04.23	6472
223	Develop	[js] 윤동이가 만든 영어 학습(?) 프로그램	hooni	2013.04.23	6462
222	Develop	[c] 메세지 프로그램 (Server - Agent - Client)	hooni	2013.04.23	6457
221	Develop	[php] 정규표현식 간단히 정리	hooni	2013.04.23	6453
220	Develop	[doc] C언어 문법 설명서	hooni	2013.04.23	6437
219	Develop	[java] 채팅창 처럼2.. swing..	hooni	2013.04.23	6421
218	Develop	[c] 다중연결 서버 만들기 #3 - poll() 사용	hooni	2013.04.23	6340

Write

Contents

[js] jQuery 셀 병합

Shortcut

Shortcut

Sign In