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

Question

我正在使用HTML + CSS + jQuery 开发一个网页，页面的元素之一是让用户在表单中输入名称，单击提交，然后应弹出一个表格。 这是该部分的相关代码，提交按钮的类名称为“submit-button”：

$(document).ready(main)

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

    //other code...
}

我遇到的问题是表格在屏幕上闪烁的时间只有按钮点击的长度（基本上没有），然后消失。 我的问题是，如何让这个动作在按下按钮之外持续存在？ 它需要通过按下按钮来触发，但也需要在按钮之外持续。 我知道表格绘制代码在事件处理程序之外运行时可以工作，但我想让它只在按下按钮时显示表格。 有任何想法吗？

Answer 1

考虑到该表位于 ID 为“mytable”的 div 内，请使用：

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

请记住最初将“mytable”的样式保持为display:none 。 希望这就是你所需要的。

Answer 2

继续Arex所说的，我使用了.css()方法。

在 CSS 中我设置了table { display: hidden; } table { display: hidden; }

或者，您可以使用$('table').hide()或$('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>