时间戳

首页 > 解决方案 > 如何用 Javascript 隐藏表格？

javascript - 如何用 Javascript 隐藏表格？

问题描述

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

那就是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);
}

标签： javascriptcss

解决方案

在这里，您有我认为您的意思。我推荐使用 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>

如果你想要香草 javascript

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>

推荐阅读