2009-05-13 6 views
1

私はWebフォーム上に2つのテーブルを持っています。ボタンをクリックすると、1つを非表示にしてもう一方を表示したいと思う。.NetのコードでテーブルIDを取得する

私は関数とdocument.getelementbyid(id).style.display = 'none'を使ってjavaScriptでこれを試しましたが、それはしました。うまくいかない。

対処:

OnClientClick="javascript: tbl2.style.display='';tbl1.style.display='none';return false;" 

答えて

3

テーブルが.netコントロールであると仮定していますか?その場合、.netはクライアント側のIDと同じサーバーIDを割り当てないため、 'id'を渡すだけでは不十分です。しないでください(

MyButton.OnClientClick = string.Format("{0}.style.display=''", ControlIWantToHide.ClientID); 

上記のコードは、あなたには、いくつかのJavaScriptを添付する方法を示しています

は、あなたはそれが本当のクライアント側のIDが取得するために.NETコントロールサーバ側のClientIDプロパティにアクセスする必要がありますそれをjavaと呼んでください)。MyButtonという名前の.net asp:ボタンをクリックして、クライアント側のクリックでControlIWantToHideというコントロールを非表示にします。

注:上記はすべてのブラウザで機能するように調整する必要があるかもしれませんが、.netのものはここで重要な要素です.ClientIDはあなたが必要としているものと思われます。コメントへの応答に基づいて

、あなたがトグルしている要素は、.NETコントロールではありませんが、それらをトリガーボタンはそう、次のとおりです。(EBROWNにより投稿機能に基づく):

<script type="text/javascript"> 
    function hide(id) 
    { 
    var element = document.getElementById(id); 

    element.style.display='none'; 
    } 

    function show(id) 
    { 
    var element = document.getElementById(id); 

    element.style.display='block'; 
    } 
</script> 

あなたはJavaScriptのイベントハンドラのサーバー側を取り付けることにより、ページ内の要素のトグルを引き起こす可能性:idを持つ要素が表示されます..which

MyButton.OnClientClick = "Show(tbl1);Hide(tbl2);return false;"; 

TBL1 dをtbl2で非表示にします。これは、あなたがトグルしている要素が.netコントロールでない場合、動作します。つまり、runat = "server"属性がありません。サーバー上のasp:ボタンにjavascriptコードを追加していても、クリックするとクライアント上でのみ実行されることに注意してください。 asp:buttonのデフォルトのポストバック動作を止めるには、上記のように 'false'を返すことを忘れないでください。

+0

実際には、テーブルは.Netコントロールではありません。彼らはhtmlテーブルです。だからこそ、私は提出が行われる前にこれを処理するためにjavascriptを使うつもりだった。 – Eric

+0

[OK]を、クライアント側の.netコントロールのものにアクセスするときに、典型的な問題に答えました。たとえそれが複製に十分であっても、実際のコードを編集して含めることは可能でしょうか?正直言ってタイプミスかもしれませんが、間違っていることはすぐにはわかりません。 –

+0

私はあなたに良いアイデアを与えるためにいくつかのコードを追加しました – Eric

0

使用のdocument.getElementById(ID)

を示すため とのdocument.getElementById(ID).style.display = "ブロック" を非表示にする.style.display = "NONE"
1

Asp.netは、run = "server"を使用して任意のサーバータグのIDを変更します。あなたがJavaScriptを使ってそれらを隠そうとしているなら、asp.netが吐き出すidを使用しなければなりません(これはビューソースを使って見ることができます)。あるいは、div内にテーブルをラップし、通常の方法でdivを表示/非表示にすることもできます。

asp:Tableを使用していて、コード内のテーブルを非表示にする場合は、.Visibleプロパティを使用してポストバックと同じ効果を得ることができます。

+0

でも、htmlテーブルのIDをどうやって隠したいのですか? – Eric

+0

テーブルタグでrunat = "server"を使わずにhtmlテーブルを使用しているのであれば、idは割り当てられたIDでなければなりません。

。 document.getElementById( 'table1')。style.display = 'none'と言ってそれを隠すことができます。実際の事例を掲載して、どの問題に取り組んでいるのかをより明確に見ることができますか? – ebrown

+0

私はいくつかのコードを追加しました。テーブルの隠れと他のものを表示することは、すべてのクライアント側でなければならない..... – Eric

0

これらが純粋にhtmlベースのテーブルであり、次に使用しない場合は -

ドキュメントを使用してください。getElementsByName( 'table1')[0]。 style.visibility = 'hidden';

又は

document.getElementsByName( 'TABLE1')[0]。 style.visibility = 'visible';

2

私は、これは正しい軌道に乗ってあなたを取得すべきだと思う:

<table id="tbl1" onclick="javascript:show('tbl2');hide('tbl1');" > 
     <tr> 
     <td> 
      table 1 stuff 
     </td> 
     </tr> 
    </table> 

    <table id="tbl2" onclick="javascript:show('tbl1');hide('tbl2');"> 
     <tr> 
     <td> 
      table 2 stuff 
     </td> 
     </tr> 
    </table> 


<script type="text/javascript"> 
     function hide(id) 
     { 
     var element = document.getElementById(id); 

     element.style.display='none'; 
     } 

     function show(id) 
     { 
     var element = document.getElementById(id); 

     element.style.display='block'; 
     } 
    </script> 

また、あなたのIDのがユニークであることを確認してください、私はあなたがtr要素をあなたのコード例では名「TBL1」を与えた気づきました。テーブルのみがIdのIDを持つ必要があります

編集:これはTrを隠すために機能します(trに一意のIDを与え、同じ方法を使用します)。しかし、テーブルにクリックイベントがある場合、その行のonclickイベントにはアクセスできないので、どちらか一方を使用する必要があります。

関連する問題