document.getElementById... JS식 만드는 법을 모르겠습니다. ㅠㅠ 정보
document.getElementById... JS식 만드는 법을 모르겠습니다. ㅠㅠ
본문
테이블이 아래와 같은 모양일 때,
선택에 의해서 1개 열(A)을 열고 닫기하려고 합니다.
아래 그림처럼 A열 전체가 열리고 닫히게 만드려는데......
A
A
A
세로로 펼치고 접는 것이 아니라, 열을 대상으로 가로로 펼치고 접는 것입니다.
---------------------------------------------------------------------------
이에 대해, 자게판에서 엑스엠엘님께서 아래와 같이 답변을 주셨습니다.
<col id="이름" 으로 해서
document.getElementById("이름").style.visibility="hidden";
로 해 보세요.
그래서 다음과 같이 적용을 해 보았습니다.
(1)
먼저 A에 해당하는 열은,
<colgroup id='time' width='100' style='display:none;'>
(2)
그 다음, A에 이벤트를 발생시킬 부분에,
<a href='javascript:time_box'><img src='aa.gif' title='클릭하면 가로로 열립니다'></a>
(위 소스는 A열 바로 좌측 녹색열에 넣었습니다.)
(3)
그리고, 자바스크립트 부분에 다음과 같이 추가했습니다.
function time_box()
{
document.getElementById("time").style.visibility="hidden";
}
------------------------------------------------------------------------------------
위와 같이 넣어보았는데, 변동이 없습니다.
위 자바스크립트는 제가 JS에 대한 지식이 전혀 없기 때문에 날림으로 넣은 것입니다.ㅠㅠ
활용팁을 뒤져서 이렇게저렇게 적용해 보고 있지만, 도무지 방법을 모르겠군요.ㅠㅠ
작업 초기에,
********************************************************************************
A열의 colgroup에 style='display:none;'을 주지 않고,
스크립트에 document.getElementById("time").style.visibility="hidden"; 만 넣었을 때는
********************************************************************************
A열 자체가 블락되어 나타나지 않더군요.
(A열 부분이 width값만 가지고 흰 바탕색만 출력되더군요. A열 내용은 출력되지 않았습니다.)
그런데, 이벤트를 발생시키기 위해 식을 만들어 보니까,
A열 자체가 그대로 출력되어 있고, 이벤트도 발생하지 않습니다.
식을 만들 줄 몰라서 고수님들께 정중히 부탁드립니다.
(__)
선택에 의해서 1개 열(A)을 열고 닫기하려고 합니다.
아래 그림처럼 A열 전체가 열리고 닫히게 만드려는데......
A
A
A
세로로 펼치고 접는 것이 아니라, 열을 대상으로 가로로 펼치고 접는 것입니다.
---------------------------------------------------------------------------
이에 대해, 자게판에서 엑스엠엘님께서 아래와 같이 답변을 주셨습니다.
<col id="이름" 으로 해서
document.getElementById("이름").style.visibility="hidden";
로 해 보세요.
그래서 다음과 같이 적용을 해 보았습니다.
(1)
먼저 A에 해당하는 열은,
<colgroup id='time' width='100' style='display:none;'>
(2)
그 다음, A에 이벤트를 발생시킬 부분에,
<a href='javascript:time_box'><img src='aa.gif' title='클릭하면 가로로 열립니다'></a>
(위 소스는 A열 바로 좌측 녹색열에 넣었습니다.)
(3)
그리고, 자바스크립트 부분에 다음과 같이 추가했습니다.
function time_box()
{
document.getElementById("time").style.visibility="hidden";
}
------------------------------------------------------------------------------------
위와 같이 넣어보았는데, 변동이 없습니다.
위 자바스크립트는 제가 JS에 대한 지식이 전혀 없기 때문에 날림으로 넣은 것입니다.ㅠㅠ
활용팁을 뒤져서 이렇게저렇게 적용해 보고 있지만, 도무지 방법을 모르겠군요.ㅠㅠ
작업 초기에,
********************************************************************************
A열의 colgroup에 style='display:none;'을 주지 않고,
스크립트에 document.getElementById("time").style.visibility="hidden"; 만 넣었을 때는
********************************************************************************
A열 자체가 블락되어 나타나지 않더군요.
(A열 부분이 width값만 가지고 흰 바탕색만 출력되더군요. A열 내용은 출력되지 않았습니다.)
그런데, 이벤트를 발생시키기 위해 식을 만들어 보니까,
A열 자체가 그대로 출력되어 있고, 이벤트도 발생하지 않습니다.
식을 만들 줄 몰라서 고수님들께 정중히 부탁드립니다.
(__)
댓글 전체
어느 고수님이 제대로 된 정확한 답변을 해주시겠지만...
그동안은 아래처럼 한 번 해보세요.
1. 저만 그런지 모르겠지만 colgroup 태그에선 이벤트가 잘 실행이 안되더군요. -.-;
그러니 먼저 colgroup 태그를 아래의 예제처럼 모두 col 로 바꾸시고...
<col width="100" /><col width="100" /><col id="time" width="100" style="display:none" /><col />
2. 이벤트 발생 부분을 아래처럼 바꿔주시고...
<a href="javascript:;" onclick="time_box();"><img src='aa.gif' title='클릭하면 가로로 열립니다'></a>
3. 스크립트 부분을 아래처럼 바꿔주세요.
<script type="text/javascript">
function time_box() {
var time = document.getElementById('time');
var show = time.style.display;
if (show == 'none') show = '';
else show = 'none';
time.style.display = show;
}
</script>
그동안은 아래처럼 한 번 해보세요.
1. 저만 그런지 모르겠지만 colgroup 태그에선 이벤트가 잘 실행이 안되더군요. -.-;
그러니 먼저 colgroup 태그를 아래의 예제처럼 모두 col 로 바꾸시고...
<col width="100" /><col width="100" /><col id="time" width="100" style="display:none" /><col />
2. 이벤트 발생 부분을 아래처럼 바꿔주시고...
<a href="javascript:;" onclick="time_box();"><img src='aa.gif' title='클릭하면 가로로 열립니다'></a>
3. 스크립트 부분을 아래처럼 바꿔주세요.
<script type="text/javascript">
function time_box() {
var time = document.getElementById('time');
var show = time.style.display;
if (show == 'none') show = '';
else show = 'none';
time.style.display = show;
}
</script>
멀미안녕님 너무 감사드립니다.
화끈하게 해결되었습니다!! ^^;;
곧 공개할 스킨에 멀미안녕님께 감사 표시하겠습니다.^^;;
화끈하게 해결되었습니다!! ^^;;
곧 공개할 스킨에 멀미안녕님께 감사 표시하겠습니다.^^;;
잘 되는군요. ^^
엑스엠엘님께도 감사드립니다.^^
document.getElementById 요놈이 표준인데 브라우저에 따라 document.all 이 제대로 먹히는 경우가 있습니다. 물론, 익스에서만 발생하는 경우인데 제작하신 소스를 각 브라우저별로 확인할 필요가 있겠습니다.
아... 그렇군요. 아미가님의 조언에 감사드립니다.
위 '멀미안녕'님께서 알려주신 팁은 브라우저별로 다르게 나타나진 않겠죠?
위 '멀미안녕'님께서 알려주신 팁은 브라우저별로 다르게 나타나진 않겠죠?
만들어진 소스로 브라우저별로 확인을 하셔야 할 겁니다. 이게 제작자들의 가장 큰 애환이지요.
저도 쓸만한 스킨에 몇 가지 기능을 넣어 만들어 보았는데 익스에서는 잘 작동하는데 파폭에서는 작동을 어설프게 하거나 아니면 아예 먹히질 않는 경우가 있어 버린 것이 한 둘이 아닙니다.
크로스브라우징이 이래서 어렵더군요.
저도 쓸만한 스킨에 몇 가지 기능을 넣어 만들어 보았는데 익스에서는 잘 작동하는데 파폭에서는 작동을 어설프게 하거나 아니면 아예 먹히질 않는 경우가 있어 버린 것이 한 둘이 아닙니다.
크로스브라우징이 이래서 어렵더군요.
말씀대로... 익스 외에서는 작동하지 않네요. ㅠㅠ
