[js] jQuery 셀 병합

hooni

조회 수 3567 댓글 1

Atachment
첨부 '2'

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄

#중복된 셀을 병합해주는 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 추천 0 비추천

Facebook Twitter Google Pinterest KakaoStory Band

위로 아래로 댓글로 가기 인쇄

✔댓글 쓰기

에디터 선택하기

✔ 텍스트 모드 ✔ 에디터 모드

댓글 쓰기

에디터 사용하기 닫기

Comments '1'

?
ㅇㅇ 2017.10.13 22:08

빈 공간은 제외하려면 어떻게 해야하나요?

수정 삭제 댓글

Category

List of Articles
번호	분류	제목	글쓴이	날짜	조회 수
1173	System/OS	해커스랩 깨기.. 후후.. ㅋㅋ	hooni	2013.04.23	18527
1172	Etc	플라스터(Plaster) 수업 내용	hooni	2016.05.24	0
1171	Develop	프로그램 문서 관리 (Doxygen)	hooni	2013.04.23	16444
1170	Develop	프로그래밍에서 foo, bar 함수의 유래	hooni	2013.06.25	21486
1169	Develop	프로그래밍 소스 관련 사이트..	hooni	2013.04.23	16532
1168	Develop	페이팔에서 돈 찾기 (Paypal withdraw)	hooni	2014.02.20	11485
1167	Etc	티스토리 테이블 html,css 구문	hooni	2013.11.03	16062
1166	System/OS	콘솔에서 패스워드 걸린 zip 압축하는 명령	hooni	2018.03.02	1140
1165	System/OS	컴파일러 수업 자료(교재 : 컴파일러 입문)	hooni	2003.04.23	22077
1164	Develop	캘리포니아 운전면허 족보	hooni	2017.06.12	896
1163	Etc	캘리포니아 운전면허 문제	hooni	2017.07.22	1191
1162	Develop	최근 논문 자료 (2011/01/03, 만현형한테 보낸거..)	hooni	2013.04.23	10366

쓰기

Contents

[js] jQuery 셀 병합

단축키

단축키

로그인