單擊分頁按鈕后如何使表格可見？
[英]How to make a table visible once the button of a pagination is clicked?
問題描述
因此，我正在嘗試創建一個分頁樣式部分，用戶可以在其中更改表格信息。 我已經可以確定，當我按“ 2”時，出現第二個表，當我單擊“ 1”或“ <”時，它返回到第一表。 我的問題是，當我第一次啟動它時，兩個表都出現在頁面上，而當我使用分頁時，它只顯示一個表。
我試圖在CSS代碼上display: none屬性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”按鈕時在頁面上顯示的內容。
1 個解決方案
解決方案1
1 已采納 2018-05-26 04:09:05
添加以下代碼以隱藏除第一個頁面加載以外的所有表：
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>
單擊按鈕時如何使輸入字段可見或單擊按鈕以在滑軌上顯示紅寶石時如何創建相同的字段
[英]How to make a input field visible when a button is clicked or create the same field when a button is clicked for ruby on rails
如何制作可通過按鈕（javascript）調整為可見窗口大小的HTML表？
[英]How to make HTML table that can be resized to the visible window with button (javascript)?
即使單擊兩次按鈕，如何使 function 僅工作一次？
[英]How to make function work only once even when button is clicked twice?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.