javascript - 通过按下按钮获取持久的动作
问题描述
我正在使用 HTML + CSS + jQuery 开发一个网页,页面的元素之一是用户在表单中输入名称,点击提交,然后应该会弹出一个表格。这是该部分的相关代码,提交按钮的类名为“submit-button”:
$(document).ready(main)
function main()
{
$(".submit-button").on("click", () =>
{
//code to draw table
});
//other code...
}
我遇到的问题是表格在屏幕上闪烁按钮单击的长度(基本上什么都没有)然后消失。我的问题是,如何让这个动作在按钮按下之外持续存在?它需要由按下按钮触发,但也需要持续到它之外。我知道表格绘制代码在事件处理程序之外运行时可以工作,但我想让它只在按下按钮时显示表格。有任何想法吗?
解决方案
继续Arex
说什么,我使用了.css()
方法。
在我设置的 CSS 中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>
推荐阅读
- chartjs-2.6.0 - 带有离网数据点的 Chartjs 折线图
- php - 如何优化 laravel 代码以加快 TTFB?
- plc - 如果 pt100 热传感器 200 米远离 plc .... plc 是否正确读取温度?
- javascript - 如何制作一个允许用户直接在 UI 上制作自定义饼图的 HTML 网页?
- powershell - 如何同时执行这两个操作以将构建类型设置为发布并输出到指定位置?
- algorithm - 间隔相交并找到最小间隔
- javascript - 为什么在接受 promise.all() 时价值会变为空?
- java - EJB 2.x 支持结束日期是什么时候?
- c++ - OpenCV(C++):使用更多样本图片时,重投影误差更大
- java - Maven 无法解析项目的依赖关系,找不到工件 com.mycompany.app:my-app:jar:1.0-SNAPSHOT