时间戳

首页 > 解决方案 > 按下按钮时显示表格

javascript - 按下按钮时显示表格

问题描述

我怎样才能制作一个按钮，所以当我按下它时，它应该显示表格。表格需要在按下按钮之前不可见，然后当按下按钮时表格应该显示出来。请帮忙

<!DOCTYPE html>
<html>

<body>
  <table cellpadding="2" cellspacing="2" border="0" bgcolor="#dfdfdf" width="40%" align="center">
    <thead>
      <tr>
        <th>Name</th>
        <th width="20%">Age</th>
        <th width="12%">Status</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
      },
    ];
    var k = '<tbody>'
    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>';
    }
    k += '</tbody>';
    document.getElementById('tableData').innerHTML = k;
  </script>
</body>

</html>

标签： javascript

解决方案

您将通过操作 CSS 来实现效果。

首先设置表格的样式Display: none，然后添加一个按钮将其更改为Display: block

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <button class="revealBtn">Reveal Table</button>
    <table
      style="display: none"
      cellpadding="2"
      cellspacing="2"
      border="0"
      bgcolor="#dfdfdf"
      width="40%"
      align="center"
    >
      <thead>
        <tr>
          <th>Name</th>
          <th width="20%">Age</th>
          <th width="12%">Status</th>
        </tr>
      </thead>
      <tbody id="tableData"></tbody>
    </table>
    <script type="text/javascript">
      console.log("scripts loading...");
      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 },
      ];
      var k = "<tbody>";
      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>";
      }
      k += "</tbody>";
      document.getElementById("tableData").innerHTML = k;

      const myTable = document.querySelector("table");
      console.log(myTable);
      const revealBtn = document.querySelector(".revealBtn");
      const revealTable = () => {
        myTable.style.display = "block";
      };
      revealBtn.addEventListener("click", revealTable);
    </script>
  </body>
</html>

这应该这样做。

推荐阅读