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

【问题标题】：How to toggle (hide/show) a table onClick of <a> tag in Javascript如何在Javascript中切换（隐藏/显示）<a>标签的点击表格
【发布时间】：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 时，它会显示我的表格，但当我下次单击它时不会隐藏。我做错了什么？

【问题讨论】：

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

标签： javascript html asp.net toggle

【解决方案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>

【讨论】：