从按下按钮中获取要持续的操作

Question

I'm using HTML + CSS + jQuery to develop a webpage, and one of the elements of the page is for the user to enter a name into a form, click submit, and then a table should pop up. Here is the relevant code for that part, with the submit button having class name "submit-button":

$(document).ready(main)

function main()
{
    $(".submit-button").on("click", () =>
    {
        //code to draw table
    });

    //other code...
}

The problem I'm running into is that the table flashes on screen for just the length of the button click (which is basically nothing) and then disappears. My question is, how do I get this action to persist outside of the button press? It needs to be triggered by the button press but also needs to last outside of it. I know the table drawing code works when run outside of the event handler, but I want to make it so the table only shows up when the button is pressed. Any ideas?

Answer 1

Considering the table to be inside a div with id "mytable", use:

$(".submit-button").on("click", () =>
    {
        document.getElementById("mytable").style.display="block";
    });

Remember to keep the style of "mytable" as display:none initially. Hopefully this is what you need.

Answer 2

Continuing with what Arex said, I have used .css() method.

In the CSS I have set table { display: hidden; } table { display: hidden; }

Alternatively, you can use $('table').hide() or $('table').show() .

---

 $(document).ready(() => { $('table') $('button').on('click', () => { $('table').css('display', 'block'); }); });

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; display: none; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> <br> <button>Show Table</button>