JavaScript data-toogle

Question

У меня есть таблица в html, и я хочу заменить эту таблицу другой таблицей при нажатии кнопки и снова вернуться к первой таблице при нажатии второй кнопки. я пробовал это примерно в html файле, и он работает, но когда тот же лог c я применил в моем 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>

Таблица с идентификатором 01 будет таблицей по умолчанию и будет отображаться при загрузке страницы. Таблица с идентификатором 02 будет отображаться при нажатии кнопки с идентификатором b1, а таблица с идентификатором 03 - кнопкой с идентификатором b2. пожалуйста, помогите мне решить эту проблему.

Answer 1

Вот простой код, показывающий вам «мой» метод для этого

const btChangeTable = document.getElementById('bt-Change-Table')
  ,   AllTableDiv   = document.getElementById('All-tables')
  ,   TableActiv    = { current:0, classList: [ 'table1', 'table2', 'table3' ] }
  ;
btChangeTable.onclick = () =>
  {
  TableActiv.current = ++TableActiv.current % TableActiv.classList.length
  AllTableDiv.className = TableActiv.classList[ TableActiv.current ]
  }
  

table {
  margin          : 1em;
  border-collapse : collapse;
  font-family     : Arial, Helvetica, sans-serif;
  font-size       : 14px;
  }
td { 
  border           : 1px solid gray;
  text-align       : center;
  padding          : .7em 0;
  width            : 2em;
  } 

#All-tables.table1 > #Table-2,
#All-tables.table1 > #Table-3 { display : none }

#All-tables.table2 > #Table-1,
#All-tables.table2 > #Table-3 { display : none }

#All-tables.table3 > #Table-1,
#All-tables.table3 > #Table-2 { display : none }

<button id="bt-Change-Table">Change Table view</button>

<div id="All-tables" class="table1">
  <table id="Table-1">
    <caption> table 1 - Daily Sale  </caption>
    <tbody>
      <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr>
      <tr> <td>e</td> <td>f</td> <td>g</td> <td>h</td> </tr>
    </tbody>
  </table>
  <table id="Table-2">
    <caption> table 2 - Monthly Sale </caption>
    <tbody>
      <tr> <td>i</td> <td>j</td> <td>k</td> <td>l</td> </tr>
      <tr> <td>m</td> <td>n</td> <td>o</td> <td>p</td> </tr>
    </tbody>
  </table>
  <table id="Table-3">
    <caption> table 3 - Year Sale  </caption>
    <tbody>
      <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr>
      <tr> <td>m</td> <td>n</td> <td>o</td> <td>p</td> </tr>
    </tbody>
  </table>
</div>

Answer 2

Вот ваш оригинальный код, только что убрал лишний тег </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>