javascript - How to make a button show a table onclick - Stack Overflow

admin管理员组

文章数量:1318564

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>

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>

• javascript
• html
• css

Share Improve this question Follow edited Dec 4, 2017 at 17:10 VXp 12.1k66 gold badges3333 silver badges4747 bronze badges asked Dec 4, 2017 at 16:44 lloydlloyd 43311 gold badge55 silver badges1515 bronze badges 3

• 1 You want a simple toggle function. Inside your function check for the current state of the table, if it is displayed or not, and then set the opposite. – Danmoreng Commented Dec 4, 2017 at 16:46
• Ive provided both a jquery and javascript solution and btw you need to make another update, remove the "display:none" from your table and replace visibility:hidden to display:none in your div as shown in my code. – user7207170 Commented Dec 4, 2017 at 17:03
• Is it possible to do this for menus in a drop down list as they only seem to accept links – lloyd Commented Dec 5, 2017 at 9:53

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

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

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

本文标签： javascriptHow to make a button show a table onclickStack Overflow