[javascript] table > tr 에 display none, block 적용시 오류

Radio 버튼 클릭 시 원하는 tr 영역을 숨기고 나타나게 하려고 한다.

- 브라우져 : 크롬

 

 

- JavaScript Code

function viewFrmReschedule(val, cd_reschedule){
	
	$("#frmModifyReschedule").css("display","block");
	frmReschedule.cd_reschedule.value = cd_reschedule;
	
	if("CHANGE_YMD_END" === cd_reschedule){
		$("#viewModiYmdContEnd").css("display","block");
		$("#viewModiRtoNormal").css("display","none");
	}else if ("CHANGE_RTO" === cd_reschedule){
		$("#viewModiRtoNormal").css("display","block");
		$("#viewModiYmdContEnd").css("display","none");
	}
}

 

- Html Code

<table class="tbl">
    <colgroup>
        <col width="8%">
        <col width="20%">
        <col width="8%">
        <col width="*">
    </colgroup>
    <tbody>
        <tr>
            <th>상환방법</th>
            <td>
                ${ufn:getCodeName('cd_int_receipt_method', contInfo.cd_int_receipt_method)}
            </td>
            <th>대출기간</th>
            <td>${contInfo.cnt_contract_term}</td>
        </tr>
        <tr id="viewModiYmdContEnd">
            <th>만기일</th>
            <td>
                기존 : ${ufn:formatDate(contInfo.ymd_contract_end)} / 변경 : 
                <input type="text" class="datepick txCenter wid80" name="ymd_contract_end">
            </td>
            <th></th>
            <td></td>
        </tr>
        <tr id="viewModiRtoNormal">
            <th>변경회차</th>
            <td>
                <input type="text" name="cnt_expect_repayment" style="width: 30px;"> 회차
            </td>
            <th>이율변경</th>
            <td>
                기존이율 : ${contInfo.rto_normal}% / 변경 : <input type="text" name="rto_normal" style="width: 40px; text-align: center;"> % 
            </td>
        </tr>
    </tbody>
</table>

 

 

이슈

- tr을 display 할 때 colgroup이 적용 되지 않음.

 

원인

- javacript에 jQuery로 css("display","block") 하는 부분이 문제됨.

 

display를 보여 주는 기능인 block 대신 '' 빈값을 쓰던지, table-row 를 사용하면 해결 된다.

(table-row 가 표준이라는 말이 있음)

 

1. '' 빈 값을 적용한 경우(아직 원인 모름)

- 테이블 넓이가 100%인데 팝업 전체를 100%로 인식해서 colgroup이 적용 됨.

 

 

2. table-row 를 적용한 경우(아직 원인 모름)

- 마찬가지로 테이블 넓이가 100%인데 일저 영역이 100%가 됨. 그래서 테이블 넓이를 200%로 해서 적용 한 화면임. 그래서 colgroup도 다 합산이 100%  넘어가게 설정해야 제대로 화면이 이쁘게 나옴.

 

 

아마튼 결론은 block 처리 하는건 오류를 다수 발생시키고 내가 원하는 설정을 표시 못하는 경우가 발생한다고 함.

빈값이나 table-row를 사용하자. 위 처럼 다른 이유는 퍼블리셔 분께 문의할 예정.