如何<a>在 Javascript 中</a>的<a>标签点击时</a>切换（隐藏/显示）表格

Question

我想显示和隐藏（切换） <a>的<table> onClick事件。 这是我的<a>标签

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

这是我的 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>

这是我的<table>标签：

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

当我第一次单击<a> link它会显示我的表格，但在我下次单击它时不会隐藏起来。 我究竟做错了什么？

Answer 1

您正试图在同一个函数调用中改变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";
}

Answer 2

简单使用jquery

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

Answer 3

您需要将您的功能修改为：

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>

Answer 4

执行此行时，在函数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";
    }
}

看到这个小提琴

Answer 5

你的锚标签应该是：

  <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";

}

Answer 6

您始终将 true 传递给 toggleMethod，因此它将始终“显示”表格。 我会创建一个全局变量，您可以在切换方法中翻转它。

或者，您可以检查表的可见性状态而不是显式变量

Answer 7

尝试

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

Answer 8

visibility属性使元素可见或不可见。

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