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

你可以在这里测试一下： fiddle JS

注意：

我改变了将动作绑定到元素的方式。您正在尝试直接从HTML执行此操作，而不是将您存储为变量的函数。这不是最好的做法。

相反，我采用了一种方法，称为： Unobtrusive JavaScript

Answer 3

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

你只需要写一个课，比如说

hide{
display:none;
}

并使用toggle的{{1}}方法将其切换为

element.classList

这里可以看到小提琴

＆＃13;

  tableelement.classList.toggle('hidden')

＆＃13;

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

＆＃13;

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

＆＃13;

在这里进一步阅读classList web API

如何使按钮显示表格onclick

3 个答案: