Contents

Develop
2014.09.23 17:27

[js] jQuery 셀 병합

조회 수 3501 댓글 1
Atachment
첨부 '2'
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

#중복된 셀을 병합해주는 js

rowspan.png



#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

output.png


[출처] http://jsbin.com/kurawalunobu/1/edit


?
  • ?
    ㅇㅇ 2017.10.13 22:08
    빈 공간은 제외하려면 어떻게 해야하나요?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
921 Etc iOS 에서 쓸만한 오프라인 구글지도 찾기 hooni 2014.01.06 16039
920 Etc [doc] 웜 프레임워크 검증환경 구축(작성중..) file hooni 2013.04.23 16013
919 Etc 여기저기서 모은 VoIP(인터넷전화) 자료들~ file hooni 2013.04.23 15966
918 Etc 티스토리 테이블 html,css 구문 hooni 2013.11.03 15965
917 System/OS [owasp] 10대 웹어플리케이션 보안 취약 file hooni 2013.04.23 15910
916 PPT [ppt] 웜 과제 진행사항(프레임워크 검증환경 구축) 보고 file hooni 2013.04.23 15895
915 System/OS 라우팅 경로 결정 영향 요소 ㅋㅋ file hooni 2013.04.23 15855
914 Develop OGNL(Object Graph Navigation Language) hooni 2013.04.23 15735
913 Etc 영어의 12 시제 (The twelve tenses of English) hooni 2013.07.12 15702
912 Develop [ios] APNS 클라이언트 구현 (pdf) file hooni 2013.06.27 15692
911 Develop [c] 윈도우 API sin 함수 출력.. file hooni 2013.04.23 15675
910 System/OS [router] 설정과 기본 명령어들 모음 hooni 2013.04.23 15671
Board Pagination Prev 1 ... 17 18 19 20 21 22 23 24 25 26 ... 98 Next
/ 98