3. Implementation/VB / Java Script

테이블을 보였다가 숨기는 Jscript

SSKK 2009. 7. 21. 18:07
style 의 visibility 속성을 이용하여 테이블을 숨기거나 보이게 할 수 있다.

<html>

<script type="text/javascript">

    function toggleTable() {

        toggleObj(target);

    }

    function toggleDiv()  {

        toggleObj(test);

    }

    function toggleObj(obj) {

        if ( obj.style.visibility == "visible" )

        {

            obj.style.visibility = "hidden";

        }

        else

        {

            obj.style.visibility = "visible";

        }

    }

</script>

<body>

<input type="button" onclick="toggleDiv();" value="전체토글" />

<input type="button" onclick="toggleTable();" value="테이블만토글" /><p></p>

 

<div id="test" >보일까말까? <table border="1"><tr><td>Div 에묶여있는테이블</td></tr></table>

</div>

<p></p>

<table id="target" border="1"><tr><td>토글될테이블</td></tr></table>

</body>

</html>


아래는 실행 화면.