js点击新增怎么弹出一个表格

在JavaScript中，如果你想在点击一个按钮时弹出一个表格，你可以使用多种方法来实现这个功能。以下是一个简单的示例，展示了如何使用HTML、CSS和JavaScript来实现这个需求。

HTML部分

首先，你需要一个按钮来触发弹出表格的动作，以及一个用于显示表格的容器。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹出表格示例</title>
<style>
  /* 隐藏表格容器 */
  #tableContainer {
    display: none;
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
  }
</style>
</head>
<body>

<button id="addButton">新增</button>
<div id="tableContainer">
  <!-- 表格将在这里显示 -->
</div>

<script src="script.js"></script>
</body>
</html>

JavaScript部分

接下来，你需要编写JavaScript代码来处理按钮点击事件，并在点击时显示表格。

// script.js
document.addEventListener('DOMContentLoaded', function() {
  var addButton = document.getElementById('addButton');
  var tableContainer = document.getElementById('tableContainer');

  addButton.addEventListener('click', function() {
    // 创建表格元素
    var table = document.createElement('table');
    table.border = '1';

    // 创建表头
    var thead = document.createElement('thead');
    var headerRow = document.createElement('tr');
    ['姓名', '年龄', '邮箱'].forEach(function(text) {
      var th = document.createElement('th');
      th.textContent = text;
      headerRow.appendChild(th);
    });
    thead.appendChild(headerRow);

    // 创建表格主体
    var tbody = document.createElement('tbody');
    for (var i = 0; i < 5; i++) {
      var row = document.createElement('tr');
      ['张三', '28', 'zhangsan@example.com'].forEach(function(text) {
        var td = document.createElement('td');
        td.textContent = text;
        row.appendChild(td);
      });
      tbody.appendChild(row);
    }

    // 将表头和主体添加到表格
    table.appendChild(thead);
    table.appendChild(tbody);

    // 显示表格容器并添加表格
    tableContainer.innerHTML = ''; // 清空容器
    tableContainer.appendChild(table);
    tableContainer.style.display = 'block'; // 显示容器
  });
});

解释

HTML部分：定义了一个按钮和一个用于显示表格的div容器。初始时，表格容器是隐藏的。
JavaScript部分：
- 使用DOMContentLoaded事件确保DOM完全加载后再绑定事件。
- 获取按钮和表格容器的引用。
- 为按钮添加点击事件监听器。
- 在点击事件中，创建一个新的表格元素，并为其添加表头和几行数据。
- 清空表格容器的内容，将新创建的表格添加进去，并显示容器。