web-dev-qa-db-fra.com

comment basculer (masquer/afficher) une table lorsqu’un clic sur la balise <a> en script Java

Je souhaite afficher et masquer (basculer) l'événement <table>onClick du <a>. Ceci est ma balise <a>

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

voici ma fonction de script 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>

et voici mon tag <table>

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

La première fois que je clique sur le <a> link, il affiche ma table, mais ne me cache pas lorsque je clique dessus la prochaine fois. ce que je fais mal.

javascriptasp.nethtmljavascript-eventstoggle
14
Qadir Hussain

Vous essayez de modifier le comportement de onclick dans le même appel de fonction. Essayez comme ça:

Étiquette d'ancrage

<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

Simple en utilisant jquery

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

Vous devez modifier votre fonction en tant que: 

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

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

}

actuellement, il vérifie en fonction du paramètre boolean, vous n'avez pas à le transmettre avec votre fonction. 

Vous devez modifier votre balise d'ancrage comme suit:

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

dans votre fonction toggleTable lorsque vous faites cette ligne

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

vous appelez à nouveau la fonction. alors toggleTable est appelé encore et encore et encore, vous tombez dans un appel récursif infini.

faites simple.

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

voir ceci violon

2
Manish Mishra

Votre balise d'ancrage devrait être:

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

Et vous fonction 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

La propriété visibility rend l'élément visible ou invisible. 

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

Vous transmettez toujours true à la méthode toggleMethod, ainsi elle "montrera" toujours le tableau ... Je créerais une variable globale que vous pouvez inverser à l'intérieur de la méthode.

Sinon, vous pouvez vérifier l'état de visibilité de la table au lieu d'une variable explicite

0
TGH

Essayer

<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