html table merge

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

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

다음은 샘플 코드이다.

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

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

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