CODEWITHSUNDEEP
javascripthtmlcss
lloyd
lloyd

Reputation: 433

How to make a button show a table onclick

I am trying to embed a table inside a button to no avail, such that when the button is clicked the table shows and when it is clicked again, the table disappears. Here is a copy of my code:

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>

Upvotes: 0

Views: 30587

Answers (3)

Milad Rashidi
Milad Rashidi

Reputation: 1376

You should change the ID of your input to another ID, and then your function just need to be as below:

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

Upvotes: 2

CodeSmith
CodeSmith

Reputation: 3207

This a bit rework on your code. Vanilla only. HTML is just a bit different, with some new id's.

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

And JS I kept as simple as possible, since I assume you are the beginner and don't need something more elegant:

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

You can test it here: fiddle JS

NOTE:

I changed the way you bind your actions to elements. You are trying to do it directly from HTML and on to a function that you haven't stored as variable. This is not the best practice.

Instead I followed an approach referred to as: Unobtrusive JavaScript

Upvotes: 0

semuzaboi
semuzaboi

Reputation: 5172

To add to the list of answers , you can always use classList web API to solve this problem.

You just have to write a class , say 

hide{
display:none;
}

and toggle it with the toggle method of element.classList like

  tableelement.classList.toggle('hidden')

a fiddle can be seen here

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>

Further reading here classList web API

Upvotes: 0

Related Questions