comment bascule (afficher/masquer) une table onClick de <a> tag en java script

Je veux montrer et cacher (à bascule) de la <table> onClick cas de la <a>.
c'est mon <a> tag

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

voici ma fonction javascript 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 <table> tag

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

1ère fois quand je clique sur le <a> link elle montre ma table, mais ne cachant pas en arrière quand je clique dessus la prochaine fois. ce que je m fait mal.

Vous envoyez toujours "vrai". Juste masquer la table si elle est visible ou si elle est cachée

InformationsquelleAutor Qadir Hussain | 2013-03-29

19

Vous essayez de modifier le comportement de onclick à l'intérieur même de l'appel de fonction. Essayez comme ceci:

Balise 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";
}
```
- u peut expliquer un peu s'il vous plaît?
- href="http://en.wikipedia.org/wiki/%3F:" >opérateur Ternaire(?...:) ou le onclick?
- Est pas possible d'utiliser l'Ancre sans l'aide de # dans le href, ou quel type de contrôle(ou asp) pour utiliser la place de <a ...>.?
- Comment voulez-vous faire de sorte que le tableau est caché par défaut?
- ensemble display="none" comme un attribut css.
InformationsquelleAutor hjpotter92
7

Simple à l'aide de jquery
```
<script>
$(document).ready(function() {
    $('#loginLink').click(function() {
    $('#loginTable').toggle('slow');
    });
})
</script>
```
- où dois-je coller. désolé débutant pour jquery.
- ajouter cette ligne dans <head> balise <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></...> et ensuite de coller ce script n'importe où dans votre partie html.
- Hussain je pense que sa façon simple.
- oui upvote pour cela. mais j'ai besoin du code en java script. hjpotter92 réponse est sympa aussi. Merci beaucoup à vous aussi
InformationsquelleAutor Praveen kalal

Vous avez besoin de modifier votre fonction:

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

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

}

actuellement de contrôle, il est basé sur la boolean paramètre, vous n'avez pas à transmettre le paramètre avec votre fonction.

Vous avez besoin de modifier votre balise d'ancrage comme:

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

InformationsquelleAutor Habib

à l'intérieur de votre fonction toggleTable lorsque vous effectuez cette ligne

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

vous sont effectivement à l'appel de la fonction à nouveau. donc toggleTable est appelée de nouveau, encore et encore, vous êtes tomber dans un infini appel récursif.

faire 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 ce violon

InformationsquelleAutor Manish Mishra

Votre balise d'ancrage doit ê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";

}

InformationsquelleAutor Rohit Vyas

0

Vous êtes toujours en passant fidèle à la toggleMethod, de sorte qu'il sera toujours "spectacle" de la table.
Je voudrais créer une variable globale que vous pouvez renverser à l'intérieur de la bascule méthode à la place.

Vous pouvez également vérifier l'état de visibilité de la table à la place d'une des variables

InformationsquelleAutor 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>

InformationsquelleAutor Arvind

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

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

InformationsquelleAutor gifpif

Vous devez vous connecter pour publier un commentaire.

Balise d'ancrage

JavaScript