[펌]잘못된 테이블 소스 보정 – innerHTML
게시판 및 기타 프로그래밍에서…
잘못된 TABLE사용으로 인해 전체적인 레이아웃을 망가뜨리는 경우가 종종 있습니다…
예를 들면 아래와 같은 경우겠죠…
<table border=1 cellpadding=10>
<tr>
<td>
<table border=1 cellpadding=10>
<tr>
<td>A</td>
</td>
<td>B</td>
</tr>
</table>
위와 같은 소스는 가장 바깥의 테이블 모양을 완전히 다른 것으로 변형시켜 버리게 됩니다..
|
B |
우리가 얻고자 하는 테이블은 이런 모양이지만…
위의 소스대로라면 아래와 같이 해석되어 버립니다.
|
어떻게 하면 이런 문제점을 해결 할 수 있을까 하고…
PHP를 이용하여 보정 함수도 만들어 보고 했지만…
결국은 아래와 같은 간단한 방법으로 해결을 봤네요…
<body onload=setContents()>
<table border=1 cellpadding=10>
<tr>
<td>
<div id=contentsLayer>
</div>
</td>
<td>B</td>
</tr>
</table>
<script>
function setContents()
{
contentsLayer.innerHTML=sourceLayer.innerHTML
}
</script>
<div id=sourceLayer style=display:none>
<table border=1 cellpadding=10>
<tr>
<td>A</td>
</div>
contentsLayer는 잘못된 테이블 소스가 들어갈 공간입니다.
이곳에 들어갈 내용을 sourceLayer에 정의 해 놓고…
body가 로딩되면 setContents를 호출하여 sourceLayer의 잘못된 테이블 소스를 contentsLayer에 넣어 줍니다.
이때 반드시 sourceLayer는 문서의 가장 끝에 위치하여 다른 테이블에 영향을 주지 않도록 하거나…
히든프레임을 사용하여 처리해주는 것이 좋을 것 같네요…
재미있는점은 innerHTML을 사용하면서 잘못된 테이블 소스는 깔끔하게 다시 코딩 됩니다…
아래와 같이 말이죠…
<TABLE cellPadding=10 border=1>
<TBODY>
<TR>
<TD>A</TD>
<DIV></DIV></TR>
</TBODY>
</TABLE>
위의 방법대로라면 잘못된 테이블 소스가 좀더 복잡한 구성일 경우에도…
실질적으로 전체 레이아웃은 변형시키지 않는 것 같습니다.
최신 댓글