반응형
다음과 같은 테이블이 있다.
위 테이블을 카테고리 1번 칼럼과 2번 칼럼의 같은 데이터끼리 머지하는 방법을 알아보고자 한다.
HTML 소스는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<table>
<tr>
<th>category1</th>
<th>category2</th>
<th>category3</th>
</tr>
<tr>
<td class='c1'>AAA</td>
<td class='c2'>111</td>
<td>a</td>
</tr>
<tr>
<td class='c1'>AAA</td>
<td class='c2'>111</td>
<td>b</td>
</tr>
<tr>
<td class='c1'>AAA</td>
<td class='c2'>222</td>
<td>c</td>
</tr>
<tr>
<td class='c1'>AAA-BBB</td>
<td class='c2'>333</td>
<td>d</td>
</tr>
<tr>
<td class='c1'>AAA-BBB</td>
<td class='c2'>333</td>
<td>e</td>
</tr>
<tr>
<td class='c1'>BBB</td>
<td class='c2'>444</td>
<td>f</td>
</tr>
<tr>
<td class='c1'>BBB</td>
<td class='c2'>555</td>
<td>g</td>
</tr>
<tr>
<td class='c1'>BBB</td>
<td class='c2'>555</td>
<td>h</td>
</tr>
<tr>
<td class='c1'>CCC</td>
<td class='c2'>666</td>
<td>i</td>
</tr>
</table>
</body>
</html>
head에 jQuery를 추가하고 셀머지하는 스크립트를 다음과 같이 추가한다.
jQuery의 경로는 각자 알아서..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".c1").each(function(){
var tempString = $(this).text();
var c1_rows = $(".c1").filter(function(){
return $(this).text() == tempString;
});
if(c1_rows.length > 1){
c1_rows.eq(0).attr("rowspan", c1_rows.length);
c1_rows.not(":eq(0)").remove();
}
});
$(".c2").each(function(){
var tempString = $(this).text();
var c2_rows = $(".c2").filter(function(){
return $(this).text() == tempString;
});
if(c2_rows.length > 1){
c2_rows.eq(0).attr("rowspan", c2_rows.length);
c2_rows.not(":eq(0)").remove();
}
});
});
</script>결과는 아래와 같이 아주 깔끔하게 머지된다.
그런데 인터넷을 보다보면 값을 온전하게 비교하지 않고 contains를 사용해서 "포함되는 단어"로 비교하는 코드가 있다.
아래는 매우 잘못된 코드이다.
$(".c1").each(function(){
var tempString = $(this).text();
var c1_rows = $(".c1:contains('"+$(this).text()+"')");
//var c1_rows = $(".c1").filter(function(){
// return $(this).text() == tempString;
//});
if(c1_rows.length > 1){
c1_rows.eq(0).attr("rowspan", c1_rows.length);
c1_rows.not(":eq(0)").remove();
}
});AAA 끼리만 병합되어야 하는데 AAA가 포함된 AAA-BBB도 함께 병합된 사례이다.
인터넷에서 보고 코드를 검증 없이 작성하는 것은 매우 위험하다.
적어도 내가 작성하는 코드가 한 줄 한 줄 어떤 의미를 갖는지 꼭 이해하고 작성해야 한다.
반응형
'IT 이야기 > 웹' 카테고리의 다른 글
| 유튜브 전체화면 불가 시 확인사항 (고정포워딩/유동포워딩) (0) | 2021.12.29 |
|---|---|
| Web URL 리다이렉트 (Redirect) 2가지 구현 방법 [meta / Javascript] (0) | 2021.12.29 |
| 웹 브라우저에서 SSL 인증서 만료일 확인하는 방법 (0) | 2021.10.15 |
| SSL 인증서 비밀키 암호화 제거하는 방법 (0) | 2021.10.15 |
| 윈도우 환경에서 아파치 웹서버 버전 확인 방법 (0) | 2021.10.07 |
