html 中的ul li标签 如何绑定切换事件 控制表格的显示隐藏

你可以使用JavaScript来绑定点击事件，以控制HTML中的表格的显示和隐藏。以下是一种可能的实现方式：

首先，在HTML中，你需要有一个表格和一组用于切换显示的按钮。例如：

html<ul>
  <li>
    <button id="toggle-table1">显示/隐藏表格1</button>
    <table id="table1">
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </table>
  </li>
  <li>
    <button id="toggle-table2">显示/隐藏表格2</button>
    <table id="table2">
      <!-- 表格2 的内容 -->
    </table>
  </li>
</ul>

然后，你可以使用JavaScript来为每个按钮添加一个点击事件，当点击按钮时，会切换对应表格的可见性。以下是如何使用JavaScript来实现的示例：

javascriptdocument.getElementById('toggle-table1').addEventListener('click', function() {
  var table1 = document.getElementById('table1');
  if (table1.style.display === 'none') {
    table1.style.display = 'block';
  } else {
    table1.style.display = 'none';
  }
});

document.getElementById('toggle-table2').addEventListener('click', function() {
  var table2 = document.getElementById('table2');
  if (table2.style.display === 'none') {
    table2.style.display = 'block';
  } else {
    table2.style.display = 'none';
  }
});

这段代码中，我们首先通过元素的 id 获取到每个按钮的引用，然后为每个按钮添加了一个点击事件。在点击事件的回调函数中，我们获取到对应表格的引用，然后根据表格当前的可见性状态来切换其可见性。如果表格当前是隐藏的（style.display 属性的值为 'none'），我们就将其设置为可见（将 style.display 设置为 'block'）；否则，我们就将其隐藏。