중복되는 값을가진 셀 병합하기
페이지 정보
작성자 서방님 댓글 0건 조회 185회 작성일 06-11-07 17:16본문
간혹 쿼리를 하다보면 다음과 같은 결과를 종종 보시게 될겁니다.
┌───┬───┬───┬───┬───┐
│ key1│ a(0) | b(0) │ c(0) │ d(0) │
├───┼───┼───┼───┼───┤
│ key1 │ a(1) │ b(1) │ c(1) │ d(1) │
├───┼───┼───┼───┼───┤
│ key2 │ a(2) │ b(2) │ c(2) │ d(2) │
├───┼───┼───┼───┼───┤
│ key2 │ a(3) │ b(3) │ c(3) │ d(3) │
├───┼───┼───┼───┼───┤
│ key3 │ a(4) │ b(4) │ c(4) │ d(4) │
└───┴───┴───┴───┴───┘
이렇게 되면 key가 되는부분이 중복으로 처리되어 보기싫어지죠..
보통 이런경우는 같은 값의 셀들은 병합시켜주면 보기 좋습니다.
아래처럼요..
┌───┬───┬───┬───┬───┐
│ │ a(0) | b(0) │ c(0) │ d(0) │
│ key1├───┼───┼───┼───┤
│ │ a(1) │ b(1) │ c(1) │ d(1) │
├───┼───┼───┼───┼───┤
│ │ a(2) │ b(2) │ c(2) │ d(2) │
│ key2├───┼───┼───┼───┤
│ │ a(3) │ b(3) │ c(3) │ d(3) │
├───┼───┼───┼───┼───┤
│ key3 │ a(4) │ b(4) │ c(4) │ d(4) │
└───┴───┴───┴───┴───┘
이렇게 하기위해서는 여러방법이 있겠지만,, 저는 기냥 스크립트로 해결해 봤습니다.
장점이라고 하면,, 재사용이 가능하다는거.. ㅎㅎ
그럼 소스 보시겠습니다...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Merge Row </title>
<script>
/* ****************************************************************************
* 함 수 명 : mergeRows([Object oTbl][, Integer iCell])
* 기 능 : 이전 Row의 지정한 Cell과 현재 Row, Cell의 값이 동일하면 이를 합쳐줌
* 사 용 법 : mergeRows(document.body.getElementsByTagName('TABLE')[0], 0);
* 사 용 예 : <body onload="mergeRows(document.body.getElementsByTagName('TABLE')[0], 0);">
* 작 성 자 : 이기덕
* 작 성 일 : 2006-10-18
* 수 정 일 : 2006-10-18
* ***************************************************************************/
function mergeRows() {
var argu = mergeRows.arguments;
var cnt = 1; // rowspan 값
var oTbl = argu[0]; // 비교할 Table Object, default=첫번째 테이블
var oRow; // 현재 Row Object
var oCell; // 현재 Cell Object
var iRow; // 이전에 일치했던 Row Index
var iCell = argu[1] == null ? 0 : argu[1]; // 비교할 Cell Index, default=0
var vPre; // 이전에 일치했던 값
var vCur; // 현재 값
var bChk = false; // 처음 일치인지 여부
try {
for (var i=0; i<oTbl.rows.length; i++) { // Row Index만큼 Loop
for (var j=0; j<oTbl.rows[i].cells.length; j++) { // Cell Index 만큼 Loop
if (iCell == -1 || iCell == j) { // 비교할 Cell Index와 현재 Cell Index가 동일하면,,
vCur = oTbl.rows[i].cells[j].outerText;
if (vPre == vCur) { // 이전값과 현재값이 동일하면,,
if (bChk == false) { // 처음 일치시에만 적용
iRow = i-1;
bChk = true;
} // end of if
cnt++;
oTbl.rows[iRow].cells[j].rowSpan = cnt;
oTbl.rows[i].deleteCell(j);
} else { // 이전값과 현재값이 다르면,,
cnt = 1;
vPre = vCur;
bChk = false;
} // end of if
break;
} // end of if
} // end of for
} // end of for
} catch (e) {
alert(e.description);
} // end of try{} catch{}
} // end of function
</script>
</head>
<body onload="mergeRows(nTbl, 0);">
<p>원래는 이 테이블<br>
<table border=1 id="x">
<tr>
<td>aaa</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>aaa</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
</table>
<p>병합된 테이블<br>
<table border=1 id="nTbl">
<tr>
<td>aaa</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>aaa</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
</table>
</body>
</html>
출처 : php스쿨
┌───┬───┬───┬───┬───┐
│ key1│ a(0) | b(0) │ c(0) │ d(0) │
├───┼───┼───┼───┼───┤
│ key1 │ a(1) │ b(1) │ c(1) │ d(1) │
├───┼───┼───┼───┼───┤
│ key2 │ a(2) │ b(2) │ c(2) │ d(2) │
├───┼───┼───┼───┼───┤
│ key2 │ a(3) │ b(3) │ c(3) │ d(3) │
├───┼───┼───┼───┼───┤
│ key3 │ a(4) │ b(4) │ c(4) │ d(4) │
└───┴───┴───┴───┴───┘
이렇게 되면 key가 되는부분이 중복으로 처리되어 보기싫어지죠..
보통 이런경우는 같은 값의 셀들은 병합시켜주면 보기 좋습니다.
아래처럼요..
┌───┬───┬───┬───┬───┐
│ │ a(0) | b(0) │ c(0) │ d(0) │
│ key1├───┼───┼───┼───┤
│ │ a(1) │ b(1) │ c(1) │ d(1) │
├───┼───┼───┼───┼───┤
│ │ a(2) │ b(2) │ c(2) │ d(2) │
│ key2├───┼───┼───┼───┤
│ │ a(3) │ b(3) │ c(3) │ d(3) │
├───┼───┼───┼───┼───┤
│ key3 │ a(4) │ b(4) │ c(4) │ d(4) │
└───┴───┴───┴───┴───┘
이렇게 하기위해서는 여러방법이 있겠지만,, 저는 기냥 스크립트로 해결해 봤습니다.
장점이라고 하면,, 재사용이 가능하다는거.. ㅎㅎ
그럼 소스 보시겠습니다...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Merge Row </title>
<script>
/* ****************************************************************************
* 함 수 명 : mergeRows([Object oTbl][, Integer iCell])
* 기 능 : 이전 Row의 지정한 Cell과 현재 Row, Cell의 값이 동일하면 이를 합쳐줌
* 사 용 법 : mergeRows(document.body.getElementsByTagName('TABLE')[0], 0);
* 사 용 예 : <body onload="mergeRows(document.body.getElementsByTagName('TABLE')[0], 0);">
* 작 성 자 : 이기덕
* 작 성 일 : 2006-10-18
* 수 정 일 : 2006-10-18
* ***************************************************************************/
function mergeRows() {
var argu = mergeRows.arguments;
var cnt = 1; // rowspan 값
var oTbl = argu[0]; // 비교할 Table Object, default=첫번째 테이블
var oRow; // 현재 Row Object
var oCell; // 현재 Cell Object
var iRow; // 이전에 일치했던 Row Index
var iCell = argu[1] == null ? 0 : argu[1]; // 비교할 Cell Index, default=0
var vPre; // 이전에 일치했던 값
var vCur; // 현재 값
var bChk = false; // 처음 일치인지 여부
try {
for (var i=0; i<oTbl.rows.length; i++) { // Row Index만큼 Loop
for (var j=0; j<oTbl.rows[i].cells.length; j++) { // Cell Index 만큼 Loop
if (iCell == -1 || iCell == j) { // 비교할 Cell Index와 현재 Cell Index가 동일하면,,
vCur = oTbl.rows[i].cells[j].outerText;
if (vPre == vCur) { // 이전값과 현재값이 동일하면,,
if (bChk == false) { // 처음 일치시에만 적용
iRow = i-1;
bChk = true;
} // end of if
cnt++;
oTbl.rows[iRow].cells[j].rowSpan = cnt;
oTbl.rows[i].deleteCell(j);
} else { // 이전값과 현재값이 다르면,,
cnt = 1;
vPre = vCur;
bChk = false;
} // end of if
break;
} // end of if
} // end of for
} // end of for
} catch (e) {
alert(e.description);
} // end of try{} catch{}
} // end of function
</script>
</head>
<body onload="mergeRows(nTbl, 0);">
<p>원래는 이 테이블<br>
<table border=1 id="x">
<tr>
<td>aaa</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>aaa</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
</table>
<p>병합된 테이블<br>
<table border=1 id="nTbl">
<tr>
<td>aaa</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>aaa</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
</table>
</body>
</html>
출처 : php스쿨
댓글목록
등록된 댓글이 없습니다.
