Contents

Develop
2014.09.23 17:27

[js] jQuery 셀 병합

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

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
No. Category Subject Author Date Views
181 Develop 알고리즘 성능분석 file hooni 2014.06.24 2963
180 Develop 알고리즘 성능 분석 기준 hooni 2014.06.24 2783
179 Develop [ios] XCode에서 Provisioning Profile 여러개 중복될 때 hooni 2014.06.26 2814
178 Develop [ios] TextField 특정 문자만 사용하도록 하기 hooni 2014.06.30 2675
177 Develop [ios] @property의 속성 (strong, weak, copy) 사용 경우 hooni 2014.08.08 1656
176 Develop [ios] 카테고리 확장 메소드를 찾지 못하는 경우 file hooni 2014.08.08 1993
175 Develop [ios] Objective-C 에서 자주 사용하는 수학 함수와 유용한 Define hooni 2014.08.08 1858
174 Develop [ios] Xcode cannot run using the selected device hooni 2014.08.14 1787
» Develop [js] jQuery 셀 병합 1 file hooni 2014.09.23 3490
172 Develop [ios] iOS 8 개발자가 우선 알아야 할 3가지 file hooni 2014.10.02 900
171 Develop '2014 모바일 개발 트렌드' 발표자료입니다. file hooni 2014.10.02 978
170 Develop [js] 좋은 강연자료 & UI 자료 hooni 2014.10.06 905
Board Pagination Prev 1 ... 51 52 53 54 55 56 57 58 59 60 ... 71 Next
/ 71