Contents

Develop
2014.09.23 17:27

[js] jQuery 셀 병합

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