동적 rowspan, 동적으로 테이블 행 병합하기

	ID	A	B

HTML에서 이런 식으로 테이블 행을 병합하려면

<td rowspan = "3"></td> 

이런 식으로 만들어두면 된다.

(w3schools.com의 관련 자료)

하지만 DB에서 한 줄씩 만들어나가야 한다면 어떻게 해야할까 ?

처음엔 불러올 때 앞 뒤 비교해서 묶으려고 했다. rowspan은 배열의 length를 이용하면 되니깐!

근데 더 복잡해지면서 제대로 동작도 안해서 접기로 마음먹고 구글을 검색했다.

그러다가 동적으로 테이블을 병합하는 방법을 찾아냈다!!

구글에 동적 rowspan 치면 가장 먼저 나오는 사이트를 참고했는데, 다른 곳을 둘러봐도 이 방법이 제일 간단한 것 같다.

다만, 여기에 있는 방식으로 하면 클래스로 지정한 하나의 column만 행 병합을 실행한다.

나는 하나의 열을 기준으로 다른 열에도 행 병합을 해야했다.

(위의 표에서 ID(기준)로 행 병합을 실시하는데 A,B에도 같은 사이즈로 행 병합 실행)

function rowspan(){
 
    $(".td_class_ID").each(function() {
 
          var id_rows = $(".td_class_ID:contains('" + $(this).text() + "')");
          var a_rows = id_rows.siblings(".td_class_A");
          var b_rows = id_rows.siblings(".td_class_B");
 
         if (id_rows.length > 1) {
            id_rows.eq(0).attr("rowspan", id_rows.length);
            a_rows.eq(0).attr("rowspan", id_rows.length);
            b_rows.eq(0).attr("rowspan", id_rows.length);
 
            id_rows.not(":eq(0)").remove();
            a_rows.not(":eq(0)").remove();
            b_rows.not(":eq(0)").remove();
          }  
        });
}

.td_class_ID:contains( $(this).text() )    -    ID column의 클래스 이름을 기준으로 text가 포함된 row들을 가져온다.

id_rows.siblings(".td_class_A")    -    id_rows에 저장된 배열(?)의 형제들에서 A column의 클래스를 가져온다.

<tr>
    <td class = "td_class_ID"> id </td>
    <td class = "td_class_A"> value A</td>    
</tr>

이런식으로 있으면 한 부모(<tr>) 밑에 있으므로 <td>는 모두 형제

위 사이트에 나와있는 것 응용까진 아니고 그냥 덧붙인 정도다.

다른 방법이 있다면 적극 참조활용하겠습니다!