[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++] 헤더, 소스 파일 분리해서 작성해본 테스트 소스	hooni	2013.04.23	6719
684	Develop	[c++] 현승이가 준 P2P 프로그램 소스 ㅋㅋ	hooni	2013.04.23	12105
683	Develop	[c++] 현승이가 준 메신저 소스.. ㅋㅋ	hooni	2013.04.23	8301
682	Develop	[c++][mfc] 파일 입출력 샘플 (한줄씩 읽어서 다른 파일에 쓰기)	hooni	2013.04.23	15060
681	Develop	[c++]현승이가 보내준 동영상 암호화 자료.. 볼것..	hooni	2003.04.23	9756
680	Develop	[c++]현승이가 보내준 암호화 모듈 AES라인델..	hooni	2003.04.23	10745
679	Develop	[c/c++] Makefile 사용하기.. ㅋㅋ	hooni	2003.04.23	7389
678	Develop	[chm] C++ 문법 가이드	hooni	2013.04.23	7970
677	Develop	[chm] Programming Applications for Microsoft Windows	hooni	2013.04.23	7282
676	Develop	[chm] 비주얼 C++ 팁 모음 문서	hooni	2013.04.23	7519
675	Develop	[chm] 윈도우즈에서 디버깅 기법(Debugging Applications)	hooni	2013.04.23	7553
674	Develop	[coding] Find all anagrams in a string	hooni	2017.06.27	1303

Write

Contents

[js] jQuery 셀 병합

Shortcut

Shortcut

Sign In