it-swarm.com.ru

как переключить (скрыть/показать) таблицу по клику тега <a> в скрипте Java

Я хочу показать и скрыть (переключить) событие <table>onClick<a>. Это мой тег <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, он показывает мою таблицу, но не прячется, когда я щелкаю ее в следующий раз. что я делаю не так.

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

увидеть это скрипка

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, поэтому он всегда будет "показывать" таблицу .... Я бы создал глобальную переменную, которую вы можете вместо этого переключать внутри метода toggle.

В качестве альтернативы вы можете проверить состояние видимости таблицы вместо явной переменной

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