HTML/CSS/JAVASCRIPT 강의실

시삽: 레드플러스 님 
게시판 이동:
 제목 : 활용예제 : 테이블의 행(tr)을 동적으로 숨기는 기능 : id 속성 사용
글번호: 247
작성자: 레드플러스
작성일: 2008/12/17 오전 11:24:00
조회수: 10966
파일: ShowHideTableRow.png (5 KB) / 전송수: 2598
ShowHideTableRow.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script language="javascript" type="text/javascript">
        function ChangeStatus(flag) {
            if (flag == "A") {
                document.getElementById("trAsp").style.visibility = "visible";
                document.getElementById("trAsp").style.display = "block";
                document.getElementById("trSil").style.visibility = "hidden";
                document.getElementById("trSil").style.display = "none";
            }
            else if (flag == "S") {
                document.getElementById("trAsp").style.visibility = "hidden";
                document.getElementById("trAsp").style.display = "none";
                document.getElementById("trSil").style.visibility = "visible";
                document.getElementById("trSil").style.display = "block";
            }
            else {
                document.getElementById("trAsp").style.visibility = "visible";
                document.getElementById("trAsp").style.display = "block";
                document.getElementById("trSil").style.visibility = "visible";
                document.getElementById("trSil").style.display = "block";            
            }
        }
    </script>
</head>
<body>

<h3>테이블의 행(tr)을 동적으로 숨기는 기능 : id 속성 사용</h3>

<input type="radio" id="all" name="optFavorite" onclick="ChangeStatus('');" />
    <label for="all">모두 보이기</label>
<input type="radio" id="aspnet" name="optFavorite" onclick="ChangeStatus('A');" />
    <label for="aspnet">ASP.NET 보이기</label>
<input type="radio" id="silverlight" name="optFavorite" onclick="ChangeStatus('S');" />
    <label for="silverlight">Silverlight 보이기</label>

<table border="1" width="100%">
    <tr id="trAsp">
        <td>ASP.NET</td>
    </tr>
    <tr id="trSil">
        <td>Silverlight</td>
    </tr>
</table>

</body>
</html>
 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트

(댓글을 남기려면 로그인이 필요합니다.)

관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 활용예제 : 동적테이블 생성(How to Build Tables Dynamically... - 레드플러스 2008-12-25 4521
현재글 활용예제 : 테이블의 행(tr)을 동적으로 숨기는 기능 : id 속성 사용 ShowHideTableRow.png(5 KB) 레드플러스 2008-12-17 10966
다음글 활용예제 : <textarea> 크기를 동적으로 증가/감소 IncreaseAndDecreaseTextBox.zip(1 KB) 레드플러스 2008-12-16 6218
 
손님 사용자 Anonymous (손님)
로그인 Home