close
프로필 배경
프로필 로고

탁구치는 개발자

프로그래밍 · 2012. 11. 6. fullscreen 넓게보기

html table merge

간혹 아래와 같이 html table을 merge한 후 화면에 보여줘야 하는 경우가 있다.


etc-image-0



전에는 for문 돌리며 if 처리를 통해 해결했는데 다음과 같이 DOM을 이용하면 코드를 이해하기 쉽고, 유지보수하기 편해진다.


다음은 샘플 코드이다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// cell merge
mergeCell("listTable");
});
// cell merge
function mergeCell(tableId) {
// variable 정의
var first = true;
var prevRowspan1 = 1;
var prevCell1 = null;
var prevRowspan2 = 1;
var prevCell2 = null;
// tr 모두 추출
var rows = $("#" + tableId + " > tbody").children();
for (var i = 0; i < rows.length; i++ ) {
// first row
if (first) {
prevRow = rows[i];
prevCell1 = $(prevRow).find("td").eq(0); // 기간
prevCell2 = $(prevRow).find("td").eq(1); // 성별
console.log("#############################################");
console.log("## first row process");
console.log("#############################################");
console.log(prevCell1);
console.log(prevCell2);
first = false;
continue;
}
var row = rows[i]; // row
var tdList = $(row).find("td"); // row > td 리스트
var firstCell = $(tdList).eq(0); // 첫 번째 행
var secondCell = $(tdList).eq(1); // 두 번째 행
var firstCellText = $(firstCell).text(); // 첫 번째 행 text 추출
var secondCellText = $(secondCell).text() // 두 번째 행 text 추출
// 두 번째 row 부터 텍스트 비교
if (prevCell1.text() == firstCellText) {
if (prevCell2.text() == secondCellText) { // 성별 값 비교
prevRowspan2++; // 중복되는 값이 있으므로 rowspan +1
$(prevCell2).attr("rowspan", prevRowspan2); // 첫 번째 row의 두 번째 cell에 rowspan 추가 (성별)
$(secondCell).remove(); // 중복 cell element 삭제
} else {
prevRowspan2 = 1;
prevCell2 = secondCell;
}
prevRowspan1++;
$(prevCell1).attr("rowspan", prevRowspan1);
$(firstCell).remove();
}
else {
prevRowspan1 = 1;
prevRowspan2 = 1;
prevCell1 = firstCell;
prevCell2 = secondCell;
}
}
}
</script>
</head>
<body>
<table id="listTable" border="1">
<thead>
<tr>
<th>기간</th>
<th>성별</th>
<th>연령</th>
<th>접속count</th>
</tr>
</thead>
<tbody>
<tr>
<td>2012.11.06</td>
<td>남자</td>
<td>14</td>
<td>200</td>
</tr>
<tr>
<td>2012.11.06</td>
<td>남자</td>
<td>15</td>
<td>200</td>
</tr>
<tr>
<td>2012.11.07</td>
<td>남자</td>
<td>16</td>
<td>200</td>
</tr>
<tr>
<td>2012.11.06</td>
<td>남자</td>
<td>17</td>
<td>200</td>
</tr>
<tr>
<td>2012.11.06</td>
<td>여자</td>
<td>14</td>
<td>200</td>
</tr>
<tr>
<td>2012.11.06</td>
<td>여자</td>
<td>15</td>
<td>400</td>
</tr>
<tr>
<td>2012.11.07</td>
<td>여자</td>
<td>15</td>
<td>400</td>
</tr>
</tbody>
</table>
</body>
</html>
view raw gistfile1.html hosted with ❤ by GitHub



여기서 중요한 부분은 꼭 merge할 cell은 정렬이 되어 있어야 한다는 것이다. (DB에서 query 조회 시 order by를 이용하여 정렬 처리)


정렬이 안 되어 있는 상태에서 merge를 하게 되면 다음과 같이 원하지 않는 결과를 가져올 수 있다.


etc-image-1



이유는 코드를 확인해 보면 안다.


저작자표시

'프로그래밍' 카테고리의 다른 글

spring meta annotation 정리  (0) 2012.11.21
HashMap 메소드 테스트 케이스 작성  (0) 2012.11.09
synchronized 키워드 3가지 테스트 케이스  (0) 2012.11.09
이클립스 junit 특정 메소드만 테스트를 실행하고 싶을 때  (1) 2012.11.07
jquery radio 테스트  (2) 2012.11.06
XML namespace 이해하기  (0) 2012.11.06
jquery checkbox 전체 선택, 전체 해제, 체크 값 추출  (6) 2012.11.05
jquery selector 실습  (1) 2012.11.02
프로그래밍 관련 글
더 보기

티스토리툴바