如何实现点击按钮后展示默认隐藏的HTML表格的功能

你只需要在原有代码基础上做3处修改即可实现需求：

• 新增触发显示的按钮元素
• 给表格添加默认隐藏的样式和唯一标识ID
• 补充按钮点击事件的逻辑，点击时修改表格的显示状态

另外你原有代码存在一处冗余问题：HTML结构里已经定义了<tbody id="tableData">，但JS逻辑里又额外拼接了<tbody>标签，插入后会导致嵌套多余的tbody标签，下面的代码里已经同步修正了这个问题，同时把原本和数据不匹配的表头也做了对应调整。

完整可运行代码 #

<!DOCTYPE html>
<html>
<body>
  <!-- 新增的触发按钮 -->
  <div align="center">
    <button onclick="showTable()">点击显示表格</button>
  </div>
  <!-- 给表格加id和默认隐藏样式 -->
  <table id="targetTable" cellpadding="2" cellspacing="2" border="0" bgcolor="#dfdfdf" width="40%" align="center" style="display: none;">
    <thead>
      <tr>
        <th>ID</th>
        <th width="20%">分类</th>
        <th width="12%">数量</th>
      </tr>
    </thead>
    <tbody id="tableData"></tbody>
  </table>
  <script type="text/javascript">
    var mainObj = [{
        id: 0,
        kategori: 'Køer',
        antal: 50
      },
      {
        id: 1,
        kategori: 'Hunde',
        antal: 1
      },
      {
        id: 2,
        kategori: 'Grise',
        antal: 100
      },
      {
        id: 3,
        kategori: 'Får',
        antal: 20
      },
    ];
    // 去掉了多余的tbody拼接逻辑
    var k = ''
    for (i = 0; i < mainObj.length; i++) {
      k += '<tr>';
      k += '<td>' + mainObj[i].id + '</td>';
      k += '<td>' + mainObj[i].kategori + '</td>';
      k += '<td>' + mainObj[i].antal + '</td>';
      k += '</tr>';
    }
    document.getElementById('tableData').innerHTML = k;

    // 新增的显示表格函数
    function showTable() {
      document.getElementById('targetTable').style.display = 'table';
    }
  </script>
</body>
</html>

如果需要实现点击按钮切换显示/隐藏的效果，只需要把showTable函数改成如下逻辑即可：

function toggleTable() {
  const table = document.getElementById('targetTable')
  table.style.display = table.style.display === 'none' ? 'table' : 'none'
}

再把按钮的点击事件绑定改成onclick="toggleTable()"即可。

内容的提问来源于stack exchange，提问作者Mikkel Nielsen