如何使按钮在单击时显示表格

Question

我试图将表格嵌入按钮内无济于事，这样，当单击按钮时，显示表格，再次单击时，表格消失。 这是我的代码的副本：

 function myfunction(){ document.getElementById("displaytable").style.display = "none"; } 

 <input type="button" value="Button1" onclick='myfunction();'> <div id="displaytable" style="visibility: hidden"> <table id="displaytable" style="display: none; width: 100%" cellpadding="1" cellspacing="0" border="3"> <tr align="center"> <td class="lbl">column1</td> <td class="lbl">column2</td> <td class="lbl">column3</td> </tr> <tr> <td align="center">1</td> <td align="center">2</td> <td align="center">33</td> </tr> <tr> <td align="center">4</td> <td align="center">5</td> <td align="center">6</td> </tr> </table> </div> 

Answer 1

您应该将输入的ID更改为另一个ID ，然后您的功能仅需如下所示：

function myfunction()
{
    if (document.getElementById("displaytable").style.display === "none")
        document.getElementById("displaytable").style.display="block";
    else
        document.getElementById("displaytable").style.display="none";
}

Answer 2

这对您的代码有点重做。 仅香草。 HTML只是有些不同，带有一些新的ID。

<input id="toggleVisibilityButton" type="button" value="Button1"/>
<table  id="displaytable" style="display:none" width="100%" cellpadding="1" cellspacing="0" border="3">
    <tr align="center">
            <td class="lbl">column1</td>
            <td class="lbl">column2</td>
            <td class="lbl">column3</td>
            </tr>
    <tr>
            <td align="center">1</td>
            <td align="center">2</td>
             <td align="center">33</td>
            </tr>
            <tr>
            <td align="center">4</td>
            <td align="center">5</td>
           <td align="center">6</td>
            </tr>
</table> 

而且JS我尽可能地简化，因为我假设您是初学者，不需要其他更优雅的东西：

document.getElementById("toggleVisibilityButton").addEventListener("click", function(button) {    
   if (document.getElementById("displaytable").style.display === "none")             document.getElementById("displaytable").style.display = "block";
   else document.getElementById("displaytable").style.display = "none";
});

您可以在此处进行测试： 小提琴JS

注意：

我更改了将操作绑定到元素的方式。 您正在尝试直接从HTML到尚未存储为变量的函数执行此操作。 这不是最佳实践。

相反，我遵循一种称为： Unobtrusive JavaScript的方法。

Answer 3

要添加到答案列表中，您始终可以使用classList Web API来解决此问题。

你只需要写一堂课，说

hide{
display:none;
}

并使用element.classList的toggle方法进行toggle

  tableelement.classList.toggle('hidden')

在这里可以看到小提琴

 var click = document.getElementById('clickme'); click.addEventListener('click', myfunction); function myfunction() { var tablewrap = document.getElementById('displaytable'); tablewrap.classList.toggle('hidden') }; 

 .hidden { display: none; } .placeholder { font-size: 12px; } 

 <div id="displaytable" class="placeholder"> <table id="displaytable2" width="100%" cellpadding="1" cellspacing="0" border="3"> <tr align="center"> <td class="lbl">column1</td> <td class="lbl">column2</td> <td class="lbl">column3</td> </tr> <tr> <td align="center">1</td> <td align="center">2</td> <td align="center">33</td> </tr> <tr> <td align="center">4</td> <td align="center">5</td> <td align="center">6</td> </tr> </table> </div> <div> <input type="button" id="clickme" value="Show/Hide" /> </div> 

在这里进一步阅读classList Web API