[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] 디피-헬만 키교환(Diffie–Hellman key exchange) 샘플 코드.. ㅋㄷ	hooni	2013.04.23	9110
228	Develop	[mysql] 양력, 음력 DB데이터	hooni	2013.04.23	7802
227	Develop	[c] 파일(int fd)에서 개행문자 단위로 읽기 by 후리자	hooni	2013.04.23	7152
226	Develop	[c] 지폰(gphone) 소스.. 수정(암호화)	hooni	2013.04.23	7434
225	Develop	[c] 암호 알고리즘 소스..	hooni	2013.04.23	8341
224	Develop	[c] 시스템 보안 과제.. 시간(amc time) 변경	hooni	2013.04.23	7193
223	Develop	[switch] 시스코 카탈리스트(Cisco Catalyst) 2950 미러링 설정	hooni	2013.04.23	11386
222	Develop	[c] 네트워크 보안 프로그래밍 과제 (Server,Agent,Client)	hooni	2013.04.23	6472
221	Develop	[php] 탐색기와 같은 다이나믹 트리(xml/xsl 이용)	hooni	2013.04.23	7153
220	Develop	[js] 스타크래프트(starcraft)..	hooni	2013.04.23	6640
219	Develop	[js] 툴팁.. 좋은거.. (tooltip)	hooni	2013.04.23	7058
218	Develop	[web] URL 인코딩 방법.. 테이블.. ㅋㅋ	hooni	2013.04.23	7142

Write

Contents

[js] jQuery 셀 병합

Shortcut

Shortcut

Sign In