[js] jQuery 셀 병합

hooni

Views 3493 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
1173	Develop	'2014 모바일 개발 트렌드' 발표자료입니다.	hooni	2014.10.02	981
1172	System/OS	Apache CORS 설정 1	hooni	2020.09.04	2716
1171	Develop	Aspect Oriented Programming in Objective-C	hooni	2015.05.18	676
1170	System/OS	asx미디어 정보 기록..	hooni	2003.04.23	20533
1169	System/OS	CentOS 6.5 USB 설치 6	hooni	2013.12.18	37676
1168	System/OS	CentOS 에서 Cacti 설치하기	hooni	2015.01.02	1768
1167	System/OS	Configure Postfix to Use Gmail SMTP on Ubuntu 18.04	hooni	2020.02.07	1253
1166	Develop	DDay Memo 1.9.4 소스코드	hooni	2015.10.03	0
1165	Etc	EBS [수학영역] 미적분과 통계 기본 - 정규분포의 의미와 특징은?	hooni	2015.04.20	1003
1164	System/OS	Enable Safari Hidden Debug Menu in Mac OS X	hooni	2017.02.07	1148
1163	System/OS	Enable the Develop Menu in Safari	hooni	2017.02.07	1074
1162	Develop	GCM 사용하기 2 (단말에 GCM 구현하기)	hooni	2013.07.06	23248

Write

Contents

[js] jQuery 셀 병합

Shortcut

Shortcut

Sign In