html table merge

카테고리 없음

html table merge

예쁜꽃이피었으면 2015. 6. 9. 10:27

http://lng1982.tistory.com/83

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

전에는 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>

gistfile1.html hosted with ❤ by GitHub

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

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

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

저작자표시 비영리