JavaScript数据工具

我有一个html表格，当按下一个按钮时，我想用另一个表格替换该表格，当按下第二个按钮时，我想再次返回到第一个表格。我在一个html文件中粗略地尝试了这一点，但当我在django项目中应用相同的逻辑来切换表数据时，它不起作用。下面是JS ansd CSS代码

CSS

    table.hidden {
      display: none;
    }

JavaScript

    document.getElementById("b1").addEventListener("click", function() {
      document.getElementById("01").innerHTML = document.getElementById(
        "02"
      ).innerHTML;
    });
    document.getElementById("b2").addEventListener("click", function() {
      document.getElementById("01").innerHTML = document.getElementById(
        "03"
      ).innerHTML;
    });

html表格和按钮代码如下所示

<button id="b1" class="btn btn-outline-success btn-xs mb-2 ml-5" style="font-size: 0.8em;">Daily Sale </button>
<button id="b2" class="btn btn-outline-success btn-xs mb-2 ml-2" style="font-size: 0.8em;">Monthly</button>

  <table id="01" class="table table-striped table-bordered table-hover table-sm ml-auto css-serial">
    <thead class="thead-dark">
      <tr>
        <th scope="col">S.no.</th>
        <th scope="col">Customer</th>
        <th scope="col">Quantity (MT)</th>
        <th scope="col">Bulkers</th>
      </tr>   
    </thead>
    <tbody>
{% for x,y,z in sum_list %} 
      <tr>
        <td scope="row"></td>
        <td>{{x}}</td>
        <td>{{y}}</td>
        <td>{{z}}</td>
      </tr>
{% endfor %}
    </tbody>
  </table>

  <table id="02" class="hidden table table-striped table-bordered table-hover table-sm ml-auto css-serial">
    <thead class="thead-dark">
      <tr>
      <th scope="col">S.no.</th>
      <th scope="col">Customer</th>
      <th scope="col">Quantity (MT)</th>
      <th scope="col">Bulkers</th>
    </tr>   
    </thead>
  <tbody>
{% for x,y,z in sum_list %} 
    <tr>
      <td scope="row"></td>
      <td>{{x}}</td>
      <td>{{y}}</td>
      <td>{{z}}</td>
    </tr>
{% endfor %}
    </tbody>
  </table>
</div>


  <table id="03" class="hidden table table-striped table-bordered table-hover table-sm ml-auto css-serial">
    <thead class="thead-dark">
      <tr>
        <th scope="col">S.no.</th>
        <th scope="col">ABC</th>
        <th scope="col">XYZ</th>
        <th scope="col">ASD</th>
      </tr>   
    </thead>
    <tbody>
{% for x,y,z in month_sum %}
      <tr>
        <td scope="row"></td>
        <td>{{x}}</td>
        <td>{{y}}</td>
        <td>{{z}}</td>
      </tr>
{% endfor %}
    </tbody>
  </table>

每日销售
月刊
没有。
顾客
数量（公吨）
散货船
{sum_list%中x，y，z的百分比}
{{x}
{{y}
{{z}
{%endfor%}
没有。
顾客
数量（公吨）
散货船
{sum_list%中x，y，z的百分比}
{{x}
{{y}
{{z}
{%endfor%}
没有。
基础知识
XYZ
自闭症
{x，y，z在月_sum%}
{{x}
{{y}
{{z}
{%endfor%}

---

id为01的表将是默认表，在加载页面时可见。按下id为b1的按钮时，将显示id为02的表格；按下id为03的表格时，将显示id为b2的按钮。请帮我解决这个问题。

这是您的原始代码，刚刚删除了备用的

标记，但它似乎可以工作。你能告诉我问题出在哪里吗？正如我在上面的评论中提到的，显示和隐藏DIV标记将是一种更好的方法，而不需要冗余的第三个表

document.getElementById（“b1”）.addEventListener（“单击”，函数）（）{
document.getElementById（“01”）.innerHTML=document.getElementById(
"02"
).innerHTML；
});
document.getElementById（“b2”）.addEventListener（“单击”，函数）（）{
document.getElementById（“01”）.innerHTML=document.getElementById(
"03"
).innerHTML；
});
table.hidden{
显示：无；
}

日销售额
月刊
没有。
顾客
数量（公吨）
散货船
1.
{{x}
{{y}
{{z}
2.
{{x}
{{y}
{{z}
没有。
顾客
数量（公吨）
散货船
1.
{{x}
{{y}
{{z}
2.
{{x}
{{y}
{{z}
没有。
基础知识
XYZ
自闭症
1.
{{x}
{{y}
{{z}
2.
{{x}
{{y}
{{z}
下面是一个简单的代码，向您展示“我的”方法


const btChangeTable=document.getElementById（'bt-Change-Table'））
，AllTableDiv=document.getElementById（'All-tables'））
，TableActiv={当前：0，类列表：['table1'，'table2'，'table3']}
;
btChangeTable.onclick=（）=>
{
TableActiv.current=++TableActiv.current%TableActiv.classList.length
AllTableDiv.className=TableActiv.classList[TableActiv.current]
}

表格{
边缘：1米；
边界塌陷：塌陷；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：14px；
}
td{
边框：1px纯色灰色；
文本对齐：居中；
填充：.7em0；
宽度：2米；
} 
#表1>#表2，
#All-tables.table1>#Table-3{显示：无}
#表2>#表1，
#All-tables.table2>#Table-3{显示：无}
#表3>#表1，
#All-tables.table3>#Table-2{显示：无}
更改表视图
表1-每日销售量
a、b、c、d
e f g h
表2-每月销售量
i j k l
m n o p
表3-年销售额
a、b、c、d
m n o p
如果您的所有表都有一个父元素（比如DIV），那么就更容易了。实际上，我还没有粘贴完整的代码。此表位于div元素中。你能告诉我怎么做吗？代码中有一个结束div元素，顺便说一下，没有开始标记。我尝试了你的代码，它似乎在工作，不确定问题是什么，请参阅下面的代码片段。无论如何，我也认为替换表的HTML内容是一种奇怪的方式。只需通过它们的父div显示/隐藏它们。根本不需要第三个表。请阅读以下内容：我们不介意只为一个算法问题阅读100行代码！将一个HTML内容复制到另一个HTML内容是个坏主意。只需使用
css display:none
来隐藏那些你想隐藏的内容。从Bootstrap4到删除
btn xs
类。如下: