Как сделать таблицу видимой после нажатия кнопки нумерации страниц?

Question

Так что я пытаюсь создать раздел стиля нумерации страниц, где пользователь может изменить информацию таблицы.Я уже могу сделать так, что когда я нажимаю «2», появляется вторая таблица, а когда я нажимаю «1» или «<», она возвращается к первой таблице.У меня проблема в том, что обе таблицы появляются на странице, когда я запускаю ее в первый раз, и когда я использую нумерацию страниц, она отображает только одну таблицу. </p>

Я пытался добавить в код CSS свойство display: none и это сработало, но в конце концов, когда я нажимаю на кнопку "2", оно не появляется.

Это код, который у меня есть atm:

   <div class="col-sm-8">
    <div class="col-sm-8c col-md-12 bg-light">
      <div class="col-sm-8 col-md-12">
        <div id="tabla1" class="tabcontent">
          <div class="table-responsive my-3">
            <table class="table table table-striped table-hover my-2" style="background-color: #f5f6fa">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Name</th>
                  <th>Faculty</th>
                  <th></th>
                  <th>Progress of<br>donations</th>
                </tr>
              </thead>
              <tbody>
              <tr>
                <td>1</td>
                <td>Mary</td>
                <td>FCQI</td>
                <td>
                  <center>
                    <button type="button" class="btn btn-primary btn-sm">Donar</button>
                  </center>
                </td>
                <th>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div>
                  </div>
                </th>
              </tr>
              <tr>
                <td>2</td>
                <td>Mary</td>
                <td>FCQI</td>
                <td>
                  <center>
                    <button type="button" class="btn btn-primary btn-sm">Donar</button>
                  </center>
                </td>
                <th>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:20%"></div>
                  </div>
                </th>
              </tr>
              <tr>
                <td>3</td>
                <td>Mariana</td>
                <td>FCQI</td>
                <td>
                  <center>
                    <button type="button" class="btn btn-primary btn-sm">Donar</button>
                  </center>
                </td>
                <th>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%"></div>
                  </div>
                </th>
              </tr>
              <tr>
                <td>4</td>
                <td>Evelyn</td>
                <td>FCQI</td>
                <td>
                  <center>
                    <button type="button" class="btn btn-primary btn-sm">Donar</button>
                  </center>
                </td>
                <th>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:80%"></div>
                  </div>
                </th>
              </tr>
              <tr>
                <td>5</td>
                <td>Mary</td>
                <td>FCQI</td>
                <td>
                  <center>
                    <button type="button" class="btn btn-primary btn-sm">Donar</button>
                  </center>
                </td>
                <th>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"></div>
                  </div>
                </th>
              </tr>
              <tr>
                <td>6</td>
                <td>Mary</td>
                <td>FCQI</td>
                <td>
                  <center>
                    <button type="button" class="btn btn-primary btn-sm">Donar</button>
                  </center>
                </td>
                <th>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
                  </div>
                </th>
              </tr>
              <tr>
                <td>7</td>
                <td>Sebastian</td>
                <td>FCQI</td>
                <td>
                  <center>
                    <button type="button" class="btn btn-primary btn-sm">Donar</button>
                  </center>
                </td>
                <th>
                  <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:37%"></div>
                  </div>
                </th>
              </tr>
              <tr></tr>
              <tr></tr>
              <tr></tr>
            </tbody>
          </table>
        </div>
      </div>

        <div id="tabla2" class="tabcontent">
            <div class="table-responsive2 my-3">
              <table class="table table table-striped table-hover my-2" style="background-color: #f5f6fa">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Faculty</th>
                    <th></th>
                    <th>Progress of<br>donations</th>
                  </tr>
                </thead>
                <tbody>
                <tr>
                  <td>1</td>
                  <td>Mary</td>
                  <td>FCQI</td>
                  <td>
                    <center>
                      <button type="button" class="btn btn-primary btn-sm">Donar</button>
                    </center>
                  </td>
                  <th>
                    <div class="progress">
                      <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div>
                    </div>
                  </th>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Mary</td>
                  <td>FCQI</td>
                  <td>
                    <center>
                      <button type="button" class="btn btn-primary btn-sm">Donar</button>
                    </center>
                  </td>
                  <th>
                    <div class="progress">
                      <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:20%"></div>
                    </div>
                  </th>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mary</td>
                  <td>FCQI</td>
                  <td>
                    <center>
                      <button type="button" class="btn btn-primary btn-sm">Donar</button>
                    </center>
                  </td>
                  <th>
                    <div class="progress">
                      <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%"></div>
                    </div>
                  </th>
                </tr>
                <tr>
                  <td>4</td>
                  <td>Mary</td>
                  <td>FCQI</td>
                  <td>
                    <center>
                      <button type="button" class="btn btn-primary btn-sm">Donar</button>
                    </center>
                  </td>
                  <th>
                    <div class="progress">
                      <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:80%"></div>
                    </div>
                  </th>
                </tr>
                <tr>
                  <td>5</td>
                  <td>Mary</td>
                  <td>FCQI</td>
                  <td>
                    <center>
                      <button type="button" class="btn btn-primary btn-sm">Donar</button>
                    </center>
                  </td>
                  <th>
                    <div class="progress">
                      <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"></div>
                    </div>
                  </th>
                </tr>
                <tr>
                  <td>6</td>
                  <td>Mary</td>
                  <td>FCQI</td>
                  <td>
                    <center>
                      <button type="button" class="btn btn-primary btn-sm">Donar</button>
                    </center>
                  </td>
                  <th>
                    <div class="progress">
                      <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
                    </div>
                  </th>
                </tr>
                <tr>
                  <td>7</td>
                  <td>Mary</td>
                  <td>FCQI</td>
                  <td>
                    <center>
                      <button type="button" class="btn btn-primary btn-sm">Donar</button>
                    </center>
                  </td>
                  <th>
                    <div class="progress">
                      <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:37%"></div>
                    </div>
                  </th>
                </tr>
                <tr></tr>
                <tr></tr>
                <tr></tr>
              </tbody>
            </table>
          </div>
        </div>

И код дляЭто одна из кнопок:

<div class="tab" >
                <button class="tablinks" onclick="openCity(event, 'tabla1')"><</button>
                <button class="tablinks2" onclick="openCity(event, 'tabla1')">1</button>
                <button class="tablinks3" onclick="openCity(event, 'tabla2')">2</button>
                <button class="tablinks4" onclick="openCity(event, 'tabla2')">3</button>
                <button class="tablinks" onclick="openCity(event, 'tabla2')">4</button>
                <button class="tablinks" onclick="openCity(event, 'tabla2')">></button>
            </div>

И код JavaScript:

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
  }
  </script>

Каким-либо образом я могу сделать так, чтобы при нажатии кнопки «2» появлялась только вторая таблица?Это то, что он показывает на странице, когда я нажимаю кнопку «2».

Answer 1

Добавьте следующий код, чтобы скрыть все таблицы, кроме первой при загрузке страницы:

document.querySelectorAll(".tabcontent").forEach(function(table, i){
  if(i >= 1){
    table.style.display = "none";
  }
});

Фрагмент рабочего кода:

document.querySelectorAll(".tabcontent").forEach(function(table, i){
  if(i >= 1){
    table.style.display = "none";
  }
});
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
  }

<div class="col-sm-8">
<div class="col-sm-8c col-md-12 bg-light">
<div class="col-sm-8 col-md-12">
<div id="tabla1" class="tabcontent">
  <div class="table-responsive my-3">
    <table class="table table table-striped table-hover my-2" style="background-color: #f5f6fa">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Faculty</th>
          <th></th>
          <th>Progress of<br>donations</th>
        </tr>
      </thead>
      <tbody>
      <tr>
        <td>1</td>
        <td>Mary</td>
        <td>FCQI</td>
        <td>
          <center>
            <button type="button" class="btn btn-primary btn-sm">Donar</button>
          </center>
        </td>
        <th>
          <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div>
          </div>
        </th>
      </tr>
      <tr>
        <td>2</td>
        <td>Mary</td>
        <td>FCQI</td>
        <td>
          <center>
            <button type="button" class="btn btn-primary btn-sm">Donar</button>
          </center>
        </td>
        <th>
          <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:20%"></div>
          </div>
        </th>
      </tr>
      <tr>
        <td>3</td>
        <td>Mariana</td>
        <td>FCQI</td>
        <td>
          <center>
            <button type="button" class="btn btn-primary btn-sm">Donar</button>
          </center>
        </td>
        <th>
          <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%"></div>
          </div>
        </th>
      </tr>
      <tr>
        <td>4</td>
        <td>Evelyn</td>
        <td>FCQI</td>
        <td>
          <center>
            <button type="button" class="btn btn-primary btn-sm">Donar</button>
          </center>
        </td>
        <th>
          <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:80%"></div>
          </div>
        </th>
      </tr>
      <tr>
        <td>5</td>
        <td>Mary</td>
        <td>FCQI</td>
        <td>
          <center>
            <button type="button" class="btn btn-primary btn-sm">Donar</button>
          </center>
        </td>
        <th>
          <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"></div>
          </div>
        </th>
      </tr>
      <tr>
        <td>6</td>
        <td>Mary</td>
        <td>FCQI</td>
        <td>
          <center>
            <button type="button" class="btn btn-primary btn-sm">Donar</button>
          </center>
        </td>
        <th>
          <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
          </div>
        </th>
      </tr>
      <tr>
        <td>7</td>
        <td>Sebastian</td>
        <td>FCQI</td>
        <td>
          <center>
            <button type="button" class="btn btn-primary btn-sm">Donar</button>
          </center>
        </td>
        <th>
          <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:37%"></div>
          </div>
        </th>
      </tr>
      <tr></tr>
      <tr></tr>
      <tr></tr>
    </tbody>
  </table>
</div>
</div>

<div id="tabla2" class="tabcontent">
    <div class="table-responsive2 my-3">
      <table class="table table table-striped table-hover my-2" style="background-color: #f5f6fa">
        <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Faculty</th>
            <th></th>
            <th>Progress of<br>donations</th>
          </tr>
        </thead>
        <tbody>
        <tr>
          <td>1</td>
          <td>Mary</td>
          <td>FCQI</td>
          <td>
            <center>
              <button type="button" class="btn btn-primary btn-sm">Donar</button>
            </center>
          </td>
          <th>
            <div class="progress">
              <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div>
            </div>
          </th>
        </tr>
        <tr>
          <td>2</td>
          <td>Mary</td>
          <td>FCQI</td>
          <td>
            <center>
              <button type="button" class="btn btn-primary btn-sm">Donar</button>
            </center>
          </td>
          <th>
            <div class="progress">
              <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:20%"></div>
            </div>
          </th>
        </tr>
        <tr>
          <td>3</td>
          <td>Mary</td>
          <td>FCQI</td>
          <td>
            <center>
              <button type="button" class="btn btn-primary btn-sm">Donar</button>
            </center>
          </td>
          <th>
            <div class="progress">
              <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%"></div>
            </div>
          </th>
        </tr>
        <tr>
          <td>4</td>
          <td>Mary</td>
          <td>FCQI</td>
          <td>
            <center>
              <button type="button" class="btn btn-primary btn-sm">Donar</button>
            </center>
          </td>
          <th>
            <div class="progress">
              <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:80%"></div>
            </div>
          </th>
        </tr>
        <tr>
          <td>5</td>
          <td>Mary</td>
          <td>FCQI</td>
          <td>
            <center>
              <button type="button" class="btn btn-primary btn-sm">Donar</button>
            </center>
          </td>
          <th>
            <div class="progress">
              <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"></div>
            </div>
          </th>
        </tr>
        <tr>
          <td>6</td>
          <td>Mary</td>
          <td>FCQI</td>
          <td>
            <center>
              <button type="button" class="btn btn-primary btn-sm">Donar</button>
            </center>
          </td>
          <th>
            <div class="progress">
              <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
            </div>
          </th>
        </tr>
        <tr>
          <td>7</td>
          <td>Mary</td>
          <td>FCQI</td>
          <td>
            <center>
              <button type="button" class="btn btn-primary btn-sm">Donar</button>
            </center>
          </td>
          <th>
            <div class="progress">
              <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:37%"></div>
            </div>
          </th>
        </tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
      </tbody>
    </table>
  </div>
</div>

<div class="tab" >
  <button class="tablinks" onclick="openCity(event, 'tabla1')"><</button>
  <button class="tablinks2" onclick="openCity(event, 'tabla1')">1</button>
  <button class="tablinks3" onclick="openCity(event, 'tabla2')">2</button>
  <button class="tablinks4" onclick="openCity(event, 'tabla2')">3</button>
  <button class="tablinks" onclick="openCity(event, 'tabla2')">4</button>
  <button class="tablinks" onclick="openCity(event, 'tabla2')">></button>
</div>