사용자 이벤트가 발생할 때마다 특정 테이블의 ROW를 show, hide 해줘야 할 경우가 있다.
$("input[name=autoType]").click(function() {
if ( $(this).val() == 1 ) {
$("#autoType_2, #autoType_3, #autoType_sub").hide();
}
else if ( $(this).val() == 2 ) {
$("#autoType_2, #autoType_sub").show(); $("#autoType_3").hide();
}
else {
$("#autoType_3, #autoType_sub").show(); $("#autoType_2").hide();
}
});
....
<table>
<colgroup>
<col width="120" />
<col />
</colgroup>
<tr id="authType_2"> .... </tr>
<tr id="authType_3"> .... </tr>
<tr id="authType_sub"> .... </tr>
....
</table>
위 코드는 정해진 엘리먼트 클릭 시 클릭한 값에 대응하는 ID 기반의 엘리먼트 요소를 찾아서 화면에서 보이거나 숨기는 코드이다.
IE를 제외하고 의도한데로 모두 잘 동작한다. 그러나 IE7 및 IE8, 9, 10 버전 호환성 보기에서 show, hide 되는 테이블 ROW의 border가 없어지지 않고 화면에 잔상으로 남는 경우가 생긴다. (귀차니즘으로 화면캡쳐는 생략 ㅠㅠ)
CSS도 건드려보고 jQuery API로 개삽질을 해봤으나 해결방법은 의외였다.
<table>
<!-- <colgroup>
<col width="120" />
<col />
</colgroup> -->
<tr id="authType_2"> .... </tr>
<tr id="authType_3"> .... </tr>
<tr id="authType_sub"> .... </tr>
....
</table>
위와같이 column 형식 선언부를 없애주면 잘 동작한다. 이런 개 씨X랄 메롱스런 IE !!
'자바스크립트 > jQuery' 카테고리의 다른 글
| IE 8 이하 버전에서 개발자 콘솔 오류 해결 - SCRIPT3: 구성원이 없습니다. (0) | 2013.09.12 |
|---|---|
| 다른 도메인 간 getJSON 함수 사용시 한글문제 처리 (0) | 2013.01.31 |
| IE9 내용이 많은 테이블 Cell 한칸씩 밀리는 버그 수정 (1) | 2012.03.30 |
| Component returned failure code: 0x805e000a [nsIXMLHttpRequest.open]" nsresult: "0x805e000a (0) | 2010.03.31 |