单击分页按钮后如何使表格可见？
所以我正在尝试创建一个分页样式部分，用户可以在其中更改表信息。我可以说，当我按“2”时，第二个表出现，当我点击“1”或“＆lt;”它返回第一个表。我遇到的问题是，当我第一次启动它时，两个表都出现在页面上，当我使用分页时，它只显示一个表。
我尝试将CSS代码放在属性display: none上并且它有效但最终当我点击“2”按钮时它不会出现。
这是我的代码：
<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 个答案:
答案 0 :(得分：1)
添加以下代码以隐藏除第一页加载以外的所有表：
document.querySelectorAll(".tabcontent").forEach(function(table, i){
if(i >= 1){
table.style.display = "none";
}
});
工作代码段：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？