webentwicklung-frage-antwort-db.com.de

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.

javascriptasp.nethtmljavascript-eventstoggle
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