How to hide table with Javascript?

Question

I am trying to make a hidden table. When you click a button, it should appear on the page and then when you click on that again, it should disappear. The problem is, this code is not working:

That is the function of JS

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

This one is the HTML codes:

<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>

also if you need CSS code:

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

There is no element with the id "table" in the html you posted. You can try document.getElementsByClassName("table1"); — raz
– raz, Commented Jun 24, 2019 at 19:36
Try changing var x = document.getElementById("table"); by var x = document.querySelector(".table1");. Since the table have no id attribute, but it have a particular class. — Shidersz
– Shidersz, Commented Jun 24, 2019 at 19:39

ehab · Accepted Answer · 2019-06-24 19:36:40Z

4

The problem in your code is that in the html markup, your table does not have an id, add id="table" to the table tag

replace

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

with

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

and your code should work

answered Jun 24, 2019 at 19:36

ehab

8,1741 gold badge28 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Orçun Demirtürk Over a year ago

Thank you so much mate. It finally worked. I was freakin out. Also why is this wrong ? why cant i add class on that table ?

inputforcolor Over a year ago

you can add class as well _ to continue using your current CSS you could write <table class="table1" id="table"> _ If @ehab 's answer has worked for you don't forget to give it an up vote ; )

João Pimentel Ferreira · Accepted Answer · 2019-06-26 00:13:39Z

4

Here you have what I think you mean. I recommend using jQuery because it facilitates your code. Any doubts let me know.

$('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>

If you want vanilla 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>

edited Jun 26, 2019 at 0:13

answered Jun 24, 2019 at 19:40

João Pimentel Ferreira

16.5k14 gold badges99 silver badges131 bronze badges

1 Comment

Chris Sandvik Over a year ago

I highly recommend against introducing jQuery into your project if it doesn't really need it. Its becoming an irrelevant library very quickly and adds unnecessary bloat to your projects.

Collectives™ on Stack Overflow

How to hide table with Javascript?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related