在html中ul有多个li元素当点击每个li时在同一个地方切换显示不同的表格元素的js原生态代码

在HTML中，你可以使用`<ul>`标签创建无序列表，`<li>`元素代表列表项。要实现在点击每个`<li>`时切换显示不同的表格元素，可以结合JavaScript和HTML编写这样的代码：

首先，设置一个`<div>`作为容器，用于包含你的表格，并隐藏初始的表格：

<div id="table-container">
  <table id="initial-table" style="display:none;">
    <!-- 表格内容 -->
  </table>
</div>

然后，创建一个新的`<table>`作为备选显示的内容：

<table id="alternative-table">
  <!-- 另一个表格内容 -->
</table>

接下来，使用JavaScript为每个`<li>`添加点击事件处理程序：

// 获取所有的列表项
const liElements = document.querySelectorAll('#list ul li');

// 遍历并给每个列表项添加点击事件
liElements.forEach((li) => {
  li.addEventListener('click', function () {
    // 隐藏当前显示的表格
    const currentTable = document.getElementById('initial-table');
    if (currentTable.style.display !== 'none') {
      currentTable.style.display = 'none';
    }

    // 显示备选的表格
    const alternativeTable = document.getElementById('alternative-table');
    alternativeTable.style.display = 'block';

    // 清理逻辑，比如将点击状态或者其他数据绑定在li上
    this.classList.add('active'); // 或者其他标记当前选中的操作

    // 如果需要，你可以在这里根据li的不同内容动态选择显示的表格
  });
});

在这个示例中，每次点击列表项时，第一个表格会被隐藏，第二个表格会被显示。为了区分当前选中的列表项，你可以给它添加一个CSS样式，如`.active`。