时间戳

首页 > 解决方案 > 用onclick JS函数插入表格

javascript - 用onclick JS函数插入表格

问题描述

我想要一个 onclick 按钮，当你按下它时，它会显示一个预编译的表格。我尝试将表格用作脚本中的文本或段落，但显然它不起作用。我不知道该怎么做。你能帮助我吗？

标签： javascriptonclick

解决方案

简单的方法是使用“隐藏”类添加表格，例如：

<button id='toggleTable'>
  show/hide table
</button>
<table class='hide' id='tableTarget'>
...
</table>

js：


document.addEventListener('DOMContentLoaded', () => {
  document
    .querySelector('#toggleTable')
    .addEventListener(
      'click', 
      () => {
        document
          .querySelector('#tableTarget')
          .classList
          .toggle('hide')
      },
      false
    )
  },
  false
)

的CSS：

.hide {
  display: none !important;
}

如果您使用任何前端框架应该更容易。但这是纯 html/js/css。此解决方案不支持 IE9。如果你需要它，你必须稍微改变一下js代码。

祝你好运！

推荐阅读