1. ホーム
  2. 質問と答え
  3. の表示/非表示テーブルやdivの

の表示/非表示テーブルやdivの

2012-03-05 12 views
1

これは私が最近得た答えだったが、ここでは、ダウン死亡していると私はそれについて尋ねるために多くのいくつかの質問があります。の表示/非表示テーブルやdivの

「それはかなり一般的要求だがここに

    が id Sを管理するのは簡単で div Sを使用してページにフォームを破る
  • 片道だけ最初の目に見える

です。

<form action=".." ..> 
<!-- the first page has style set to be visible --> 
<div id="formpage_1" style="visibility: visible; display: block; .."> 
    <label for="..">..</label> 
    <input type=".." ..> 
    .. 
    <!-- NEXT button --> 
    <input type="button" value="next" onclick="pagechange(1,2);"> 
</div> 
<!-- the 2nd and following pages have style set to be invisible --> 
<div id="formpage_2" style="visibility: hidden; display: none; .."> 
    <label for="..">..</label> 
    <input type=".." ..> 
    .. 
    <!-- PREVIOUS and NEXT buttons --> 
    <input type="button" value="back" onclick="pagechange(2,1);"> 
    <input type="button" value="next" onclick="pagechange(2,3);"> 
</div> 
... 
<div id="formpage_10" style="visibility: hidden; display: none; .."> 
    <label for="..">..</label> 
    <input type=".." ..> 
    .. 
    <!-- PREVIOUS and SUBMIT buttons --> 
    <input type="button" value="back" onclick="pagechange(10,9);"> 
    <input type="submit" value="Submit"> 
</div>
  • ページ

を切り替えるには、単純なJS関数を使用します。あなたはテーブルレイアウトを使用する場合は

function pagechange(frompage, topage) { 
    var page=document.getElementById('formpage_'+frompage); 
    if (!page) return false; 
    page.style.visibility='hidden'; 
    page.style.display='none'; 

    page=document.getElementById('formpage_'+topage); 
    if (!page) return false; 
    page.style.display='block'; 
    page.style.visibility='visible'; 

    return true; 
}

編集

、複数のテーブルに（各ページに1つ）のために壊して、代わりにdiv S」

のテーブルに id秒を与えます

divを使用しているのにテーブルを使用すると正しく動作しません。後ろの次のボタンは隠されているかどうかにかかわらず常に表示され、常に上に表示されます。私はdivスタイルを使用していますables。

また、私が次をクリックしてフォームの一番下に来たら、それは私を次の中/下に連れて行きます。誰かがクリック/バックするたびにトップにリンクする方法はありますか？

ありがとうございます。

出典

2012-03-05 John Vasiliou

+1

私は、すべての可視性の使用を削除し、その逆を使うことを強くお勧めします。可視性は、隠しアイテムがページ内のスペースを占めるようにしたい場合にのみ使用されます。 – mplungjan

+0

うまくいけば、それはちょうど感謝を取り除いてしまわないで動作するようです。うまくいけば、これはすべてがうまくいくように何にも影響しません:) –

+0

テーブルパーツをどのように表示したり隠したりしますか？テーブルを使用する必要がある場合は、ROWSにIDを追加して表示することをお勧めします（推奨されていません） – mplungjan

答えて

3

おそらくそれはあなたを助けますか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title> New Document </title> 
    <meta name="Generator" content="EditPlus"> 
    <meta name="Author" content=""> 
    <meta name="Keywords" content=""> 
    <meta name="Description" content=""> 
    <script> 


    function pagechange(currentPage) { 
    var divs=document.getElementsByTagName("div"); 
    for(var i=0;i<divs.length;i++){ 
     if(divs[i].id!=('formpage_'+(parseInt(currentPage)+1))){ 
      divs[i].style.display="none"; 
      divs[i].style.visibility='hidden'; 
     }else{ 
     divs[i].style.display="block"; 
     divs[i].style.visibility='visible'; 
     } 
    } 
    } 

    </script> 
</head> 

<body> 
    <form action=".." ..> 
<!-- the first page has style set to be visible --> 
<div id="formpage_1" style="visibility: visible; display: block; .."> 
    <label for="..">..</label> 
    <input type=".." ..> 
    .. 
    <!-- NEXT button --> 
    <input type="button" value="next" onclick="pagechange(1);"> 
</div> 

<!-- the 2nd and following pages have style set to be invisible --> 
<div id="formpage_2" style="visibility: hidden; display: none; .."> 
    <label for="..">..</label> 
    <input type=".." ..> 
    .. 
    <!-- PREVIOUS and NEXT buttons --> 
    <input type="button" value="back" onclick="pagechange(0);"> 
    <input type="button" value="next" onclick="pagechange(2);"> 
</div> 
... 
<div id="formpage_3" style="visibility: hidden; display: none; .."> 
    <label for="..">..</label> 
    <input type=".." ..> 
    .. 
    <!-- PREVIOUS and SUBMIT buttons --> 
    <input type="button" value="back" onclick="pagechange(1);"> 
    <input type="submit" value="Submit"> 
</div> 

</body> 
</html>

出典

2012-06-26 07:26:11 YangHongChang

+0

私は中国のQQアカウントです243030330 – YangHongChang

0

これは、テーブル（headセクションの場所にこれを）

<script> 
function toggleTable() { 
    var myTable = document.getElementById("yourTable"); 
    myTable.style.display = (myTable.style.display == "table") ? "none" : "table"; 
} 
</script>

のために非常にうまく機能し、その後

​​

とテーブル定義

オンとオフテーブルの表示を切り替えるためのボタンを配置 
<table id="yourTable">...</table>

出典

2015-10-05 01:31:23

+0

あなたはHIDDENテーブル '

' –

関連する問題

 関連する問題