Question

我正在尝试制作隐藏表。当您单击一个按钮时，它应该出现在页面上，然后再次单击该按钮时，它应该消失。问题是，此代码不起作用：

那是JS的功能

function showtable1() {
  var x = document.getElementById("table");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

这是HTML代码：

<body>
  <video autoplay loop muted id="backgroundv1">
    <source src="fp.mp4" type="video/mp4">
  </video>
  <div class="menü1">
    <button class="button" onclick="showtable1()">Project  1</button>
    <button class="button">Project  2</button>
    <button class="button">Project  3</button>
    <button class="button">Project  4</button>
    <button class="button">Project  5</button> 
  </div>
  <table class="table1"><td></td> <td></td> </table>
</body>

如果您需要CSS代码，也可以：

.table1 {
  width: 64%;
  height: 50%;
  border: 2px solid red;
  border-radius: 12px;
  margin-left: auto;
  margin-right: auto;
  transform: translate(0);
}

Answer 1

您的代码中的问题是在html标记中，您的表没有ID，请在表标签中添加id =“ table”

替换

 <table class="table1"><td></td> <td></td> </table>

与

 <table id="table"><td></td> <td></td> </table>

您的代码应该可以工作

Answer 2

在这里您具有我认为的意思。我建议使用jQuery，因为它可以简化您的代码。如有任何疑问，请通知我。

$('button').click(function(){
  if ($('table').is(':visible')) {
    $('table').hide()
  } else {
    $('table').show()
  }
})

table, th {
  border: 1px solid black;
  border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr><th>1</th><th>2</th></tr>
  <tr><th>3</th><th>4</th></tr>
</table>
<button>toggle table</button>

如果您想要香草

function toggleTable() {
  var x = document.getElementById("myTable");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else { 
    x.style.display = "none";
  }
}

table, th {
  border: 1px solid black;
  border-collapse: collapse;
}

<table id="myTable">
  <tr><th>1</th><th>2</th></tr>
  <tr><th>3</th><th>4</th></tr>
</table>
<button onclick="toggleTable()">toggle table</button>

如何用JavaScript隐藏表格？

2 个答案: