wake-up-neo.net

so schalten Sie eine Tabelle onClick des <a> -Tags in Java-Skript ein bzw. aus

Ich möchte das <table>onClick -Ereignis des <a>..__ anzeigen und verbergen (umschalten). Dies ist mein <a>-Tag

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

hier ist meine Java-Script-Funktion 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>

und hier ist mein <table>-Tag

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

Erstes Mal, wenn ich auf den <a> link klicke, wird meine Tabelle angezeigt, jedoch nicht versteckt, wenn ich das nächste Mal darauf klicke. was ich falsch mache.

14
Qadir Hussain

Sie versuchen, das Verhalten von onclick innerhalb desselben Funktionsaufrufs zu ändern. Versuchen Sie es so:

Anker-Tag

<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";
}
19
hjpotter92

Einfach mit Jquery

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

Sie müssen Ihre Funktion wie folgt ändern: 

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

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

}

derzeit wird anhand des Parameters boolean geprüft, Sie müssen den Parameter nicht mit Ihrer Funktion übergeben. 

Sie müssen Ihr Anker-Tag wie folgt ändern:

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

innerhalb Ihrer Funktion toggleTable, wenn Sie diese Zeile ausführen

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

sie rufen die Funktion tatsächlich erneut auf. toggleTable wird erneut aufgerufen, und immer wieder fallen Sie in einen unendlichen rekursiven Aufruf.

mach es einfach.

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

siehe diese Geige

2
Manish Mishra

Ihr Anker-Tag sollte sein:

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

Und Sie Javascript-Funktion:

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

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

}
1
Rohit Vyas

Die visibility-Eigenschaft macht das Element sichtbar oder unsichtbar. 

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

Sie übergeben immer true an die toggleMethod, daher wird die Tabelle immer "angezeigt". Ich würde eine globale Variable erstellen, die Sie stattdessen innerhalb der Toggle-Methode verwenden können.

Alternativ können Sie den Sichtbarkeitsstatus der Tabelle anstelle einer expliziten Variablen überprüfen

0
TGH

Versuchen

<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