时间戳

首页 > 解决方案 > JavaScript 数据工具

javascript - JavaScript 数据工具

问题描述

我在 html 中有一个表格，并且想在按下按钮时用另一个表格替换该表格，并在按下第二个按钮时再次返回到第一个表格。我在一个 html 文件中粗略地尝试了这个并且它正在工作但是当我在我的 django 项目中应用相同的逻辑来切换表数据时它不起作用。下面是 JS 和 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>

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

标签： javascripthtmlcss

解决方案

这是您的原始代码，只是删除了备用</div>标签，但似乎可以正常工作。你能说出问题所在吗？正如我在上面的评论中提到的，显示和隐藏 DIV 标记将是一种更好的方法，而不需要多余的第三个表。

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;
});
table.hidden {
  display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<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>

    <tr>
      <td scope="row">1</td>
      <td>{{x}}</td>
      <td>{{y}}</td>
      <td>{{z}}</td>
    </tr>

    <tr>
      <td scope="row">2</td>
      <td>{{x}}</td>
      <td>{{y}}</td>
      <td>{{z}}</td>
    </tr>

  </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>

    <tr>
      <td scope="row">1</td>
      <td>{{x}}</td>
      <td>{{y}}</td>
      <td>{{z}}</td>
    </tr>

    <tr>
      <td scope="row">2</td>
      <td>{{x}}</td>
      <td>{{y}}</td>
      <td>{{z}}</td>
    </tr>

  </tbody>
</table>

<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>
    <tr>
      <td scope="row">1</td>
      <td>{{x}}</td>
      <td>{{y}}</td>
      <td>{{z}}</td>
    </tr>
    <tr>
      <td scope="row">2</td>
      <td>{{x}}</td>
      <td>{{y}}</td>
      <td>{{z}}</td>
    </tr>
  </tbody>
</table>

推荐阅读