web-dev-qa-db-ja.com

Java script）の<a>タグのテーブルonClickを切り替える（非表示/表示）方法

_<table>_の_<a>_ onClickイベントを表示および非表示（トグル）したい。これは私の_<a>_タグです

_<a id="loginLink" onclick="toggleTable(true);" href="#">Login</a>
_

ここに私のJavaスクリプト関数toggleTable(hide)

_   <script>
    function toggleTable(hide)
    {
    if (hide) {
       document.getElementById("loginTable").style.display="table";
       document.getElementById("loginLink").onclick = toggleTable(false);

    } else {
       document.getElementById("loginTable").style.display="none";
       document.getElementById("loginLink").onclick = toggleTable(true);
    }
   }
   </script>
_

ここに私の_<table>_タグがあります

_<table id="loginTable" border="1" align="center" style="display:none">
_

初めて_<a> link_をクリックすると、テーブルが表示されますが、次回クリックしたときに非表示になりません。私が間違っていること。

javascriptasp.nethtmljavascript-eventstoggle
15
Qadir Hussain

同じ関数呼び出し内でonclickの動作を変更しようとしています。このようにしてみてください：

アンカータグ

<a id="loginLink" onclick="toggleTable();" href="#">Login</a>

JavaScript

function toggleTable() {
    var lTable = document.getElementById("loginTable");
    lTable.style.display = (lTable.style.display == "table") ? "none" : "table";
}
20
hjpotter92

Jqueryを使用して簡単に

<script>
$(document).ready(function() {
    $('#loginLink').click(function() {
    $('#loginTable').toggle('slow');
    });
})
</script>
7
Praveen kalal

次のように関数を変更する必要があります。

function toggleTable()
{
   if (document.getElementById("loginTable").style.display == "table" ) {
       document.getElementById("loginTable").style.display="none";

   } else {
      document.getElementById("loginTable").style.display="table";

}

現在、booleanパラメータに基づいてチェックしているため、関数でパラメータを渡す必要はありません。

アンカータグを次のように変更する必要があります。

<a id="loginLink" onclick="toggleTable();" href="#">Login</a>
3
Habib

この行を実行すると、関数toggleTable内で

document.getElementById("loginLink").onclick = toggleTable(....

実際に関数を再度呼び出しています。 toggleTableが何度も呼び出され、何度も何度も繰り返し再帰呼び出しに陥っています。

それを簡単に。

function toggleTable()
{
     var elem=document.getElementById("loginTable");
     var hide = elem.style.display =="none";
     if (hide) {
         elem.style.display="table";
    } 
    else {
       elem.style.display="none";
    }
}

こちらをご覧ください fiddle

2
Manish Mishra

アンカータグは次のとおりです。

  <a id="loginLink" onclick="showHideTable();" href="#">Login</a>

そして、あなたはJavaScript関数：

function showHideTable()
{
   if (document.getElementById("loginTable").style.display == "none" ) {
       document.getElementById("loginTable").style.display="";

   } else {
      document.getElementById("loginTable").style.display="none";

}
1
Rohit Vyas

visibilityプロパティは、要素を表示または非表示にします。

function showTable(){
    document.getElementById('table').style.visibility = "visible";
}
function hideTable(){
    document.getElementById('table').style.visibility = "hidden";
}
0
gifpif

常にtrueをtoggleMethodに渡すため、常にテーブルが「表示」されます。代わりにトグルメソッド内で反転できるグローバル変数を作成します。

または、明示的な変数の代わりにテーブルの可視性状態を確認できます

0
TGH

試して

<script>
  function toggleTable()
    {

    var status = document.getElementById("loginTable").style.display;

    if (status == 'block') {
      document.getElementById("loginTable").style.display="none";
    } else {
      document.getElementById("loginTable").style.display="block";
    }
  }
</script>
0
Arvind