Develop
2014.09.23 17:27

[js] jQuery 셀 병합

조회 수 3567 추천 수 0 댓글 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
번호 분류 제목 글쓴이 날짜 조회 수
1173 Develop '2014 모바일 개발 트렌드' 발표자료입니다. file hooni 2014.10.02 1140
1172 System/OS Apache CORS 설정 1 hooni 2020.09.04 2915
1171 Develop Aspect Oriented Programming in Objective-C hooni 2015.05.18 951
1170 System/OS asx미디어 정보 기록.. hooni 2003.04.23 20605
1169 System/OS CentOS 6.5 USB 설치 6 file hooni 2013.12.18 37810
1168 System/OS CentOS 에서 Cacti 설치하기 hooni 2015.01.02 1941
1167 System/OS Configure Postfix to Use Gmail SMTP on Ubuntu 18.04 file hooni 2020.02.07 1509
1166 Develop DDay Memo 1.9.4 소스코드 secret hooni 2015.10.03 0
1165 Etc EBS [수학영역] 미적분과 통계 기본 - 정규분포의 의미와 특징은? hooni 2015.04.20 1105
1164 System/OS Enable Safari Hidden Debug Menu in Mac OS X file hooni 2017.02.07 1734
1163 System/OS Enable the Develop Menu in Safari file hooni 2017.02.07 1340
1162 Develop GCM 사용하기 2 (단말에 GCM 구현하기) file hooni 2013.07.06 23412
1161 Develop GCM 사용하기 3 (JSP로 GCM 푸시 서버 만들기) 4 file hooni 2013.07.06 25429
1160 Develop git 브런치 배우기 (링크) hooni 2013.07.09 20702
1159 Develop GPL, AGPL, MPL,.. 한눈에 보는 오픈소스SW 라이선스 file hooni 2014.10.14 1271
1158 Etc GSM에서 음성이 실리는 과정 요약.. hooni 2013.04.23 17589
Board Pagination Prev 1 2 3 4 5 ... 74 Next
/ 74