테이블 tr, td 등 선택하기

<원본테이블>

▼위 원본 테이블 그리는 html 소스

<table summary="연립다세대 실거래가조회 결과입니다." id="rh_table" style="display: none;">                                         
    <caption>연립다세대 실거래가조회 목록 안내</caption>                                                                                                  
    <colgroup>                                                                                                                             
        <col width='*'>                                                                                                                    
        <col width='15%'>                                                                                                                  
        <col width='10%'>                                                                                                                  
        <col width='12%'>                                                                                                                  
        <col width='12%'>                                                                                                                  
        <col width='10%'>                                                                                                                  
        <col width='15%'>                                                                                                                  
        <col width='5%'>                                                                                                                   
        <col width='8%'>                                                                                                                   
    </colgroup>                                                                                                                            
    <thead>                                                                                                                                
        <tr>                                                                                                                               
            <th scope='col' rowspan='2'>단지</th>                                                                                            
            <th scope='col' rowspan='2'>법정동</th>                                                                                           
            <th scope='col' rowspan='2'>지번</th>                                                                                            
            <th scope='col' rowspan='2'>전용<br/>면적(㎡)</th>                                                                                  
            <th scope='col' rowspan='2'>대지권<br/>면적(㎡)</th>                                                                                 
            <th scope='col' colspan='3'><span class="searchYearMonth"><fmt:formatDate value="${dateTime}" pattern="yyyy년 M월"/></span></th> 
            <th scope='col' rowspan='2'>건축<br/>년도</th>                                                                                     
        </tr>                                                                                                                              
        <tr>                                                                                                                               
            <th scope='col'>계약일</th>                                                                                                       
            <th scope='col'>거래금액(만원)</th>                                                                                                  
            <th scope='col'>층</th>                                                                                                         
        </tr>                                                                                                                              
    </thead>                                                                                                                               
    <tbody>                                                                                                                                
        <tr>                                                                                                                               
            <td colspan='9'>검색결과가 없습니다.</td>                                                                                               
        </tr>                                                                                                                              
    </tbody>                                                                                                                               
</table>                                                                                                                                   

그런데 표 자체는 그대로 두면서 

thead-tr-th 안의 글자를 바꾼다던가

thead-tr-th 추가 또는 삭제를 해서 테이블을 가공하고 싶을 때.

<가공된 테이블>

▼ 위 가공된 테이블처럼 원본테이블을 조작하려면

if ("대지권면적(㎡)" == $("#rh_table > thead > tr:nth-child(1) > th:nth-child(5)").text()) {   
    $("#rh_table > thead > tr:nth-child(2) > th:nth-child(2)").html("보증금<br/>월세");       
                                                                                         
    $("#rh_table > thead > tr:nth-child(1) > th:nth-child(5)").remove();                 
}                                                                                        

thead 가 2줄인데 첫번째 tr에서 다섯번째 th 텍스트가 대지권면적인지?

맞다면 테이블 가공해야하므로 if문 안의 내용을 실행.

아니라면 테이블이 이미 가공된 상태이므로 if문 패스.

if문 안의 내용은

thead에서 두번째 tr을 찾아서 그 tr의 2번째 th를 찾아 거래금액(만원)을 보증금월세로 바꾸고.

대지권면적 th를 제거.

가공된 테이블을 다시 원본테이블로 바꾸려면?

if ("대지권면적(㎡)" != $("#rh_table > thead > tr:nth-child(1) > th:nth-child(5)").text()) {        
    $("#rh_table > thead > tr:nth-child(1) > th:nth-child(1)").html("법정동");                   
    $("#rh_table > thead > tr:nth-child(1) > th:nth-child(2)").html("지번");                    
    $("#rh_table > thead > tr:nth-child(1) > th:nth-child(3)").html("전용<br/>면적(㎡)");          
    $("#rh_table > thead > tr:nth-child(1) > th:nth-child(4)").html("대지권<br/>면적(㎡)");         
    $("#rh_table > thead > tr:nth-child(2) > th:nth-child(2)").html("거래금액(만원)");              
                                                                                              
    $("#rh_table > thead > tr:nth-child(1)").prepend("<th schope='col' rowspan='2'>단지</th>"); 
}                                                                                             

thead > 첫번째 tr> 다섯번째 th 의 텍스트가 대지권면적이 아니면 if문 안의 내용을 실행.

append()는 뒤에 붙이는거고, prepend()는 앞에 붙이는건데 prepend() 이걸 쓰는 이유는

rowspan 이 없으면 th 위치를 지정할 수 있을 것 같은데

rowspan 대문에 th 위치 지정해서 th 추가하기가 쉽지 않아서..

th 텍스트를 바꿔주고 제일 앞에 th를 추가해주는 식으로 함.