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

Posted 2023-02-22

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

【英文标题】：How to toggle (hide/show) a table onClick of <a> tag in Javascript

【发布时间】：2013-03-19 21:02:52

【问题描述】：

我想显示和隐藏（切换）<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 时，它会显示我的表格，但当我下次单击它时不会隐藏。我做错了什么？

【问题讨论】：

您总是发送“真”。如果表格可见，只需隐藏表格，如果隐藏则显示

【参考方案1】：

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

function showTable()
    document.getElementById('table').style.visibility = "visible";

function hideTable()
    document.getElementById('table').style.visibility = "hidden";

【参考方案2】：

你的锚标记应该是：

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

【参考方案3】：

简单使用jquery

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

【讨论】：

我应该把它粘贴到哪里。对不起 jquery 的新手。

在 标签

@Qadir Hussain 我认为它很简单。

是的，对此表示赞同。但我需要java脚本中的代码。 hjpotter92 的回答也不错。也非常感谢你

【参考方案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";
    

看到这个fiddle

【参考方案5】：

试试

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

【参考方案6】：

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

【讨论】：

你能解释一下吗？

@QadirHussain Ternary operator(?...:) 或 onclick?

如果不使用 # in href 或使用什么控件（或 asp 控件）代替 ，就无法使用 Anchor。？

你将如何做到让表格默认隐藏？

@Moms 将 display="none" 设置为 css 属性。

【参考方案7】：

你总是将 true 传递给 toggleMethod，所以它总是会“显示”表格。 我会创建一个全局变量，您可以改为在切换方法中翻转它。

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

【参考方案8】：

你需要修改你的函数为：

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>