js如何实现点击显示和隐藏表格

可以使用JavaScript来实现点击显示和隐藏表格的效果，具体实现如下：

1. 在HTML中创建一个按钮和表格，给按钮和表格分别设置一个id：

<button id="btn">点击显示/隐藏表格</button>
<table id="table">
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
</table>

2. 在JavaScript中获取按钮和表格的元素，并设置按钮的点击事件：

// 获取按钮和表格的元素
const btn = document.getElementById('btn');
const table = document.getElementById('table');

// 设置按钮的点击事件
btn.addEventListener('click', function() {
  if (table.style.display === 'none') {
    table.style.display = 'table';
  } else {
    table.style.display = 'none';
  }
});

3. 在CSS中设置表格的初始样式为隐藏：

#table {
  display: none;
}

这样，当点击按钮时，表格的显示状态就会切换为显示或隐藏。