jQuery - 切换按钮显示/隐藏表数据
jQuery - toggle button show/hide table data
我需要一些帮助。
<h2>Operating systems <span class="button small toggle-btn">Toggle</span></h2>
<table class="data" cellpadding="8" border="1">
<thead>
<tr>
<th class="first" style="width:120px">
Operating System </th>
<th class="">
Percentage </th>
</tr>
</thead>
<tbody>
<tr>
<td class="">iOS 8.4</td>
<td class="">
<div class="ui-percentage" style="width:17%">17 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.3</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.2</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.1.3</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.1</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
</tbody>
</table>
当页面第一次加载时,我希望折叠表格。当我单击切换按钮时,我想更改表格状态,所以基本上是展开它并在再次单击按钮时再次折叠它。
这是我的脚本
<script>
$(document).ready(function() {
$('.toggle-btn').closest('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).closest('table').toggle();
});
});
</script>
我怎样才能使这项工作正确?
为什么不直接使用切换功能呢?
$(document).ready(function() {
$('table').hide();
$('.toggle-btn').on('click', function() {
$('table').toggle();
});
});
如果你只有一个table
那么只做
$(document).ready(function() {
$('tbody').closest('h2').next().find("tbody").hide();
$('.toggle-btn').on('click', function() {
$('tbody').toggle();
});
});
对于多个同级表
您可以找到最近的h2
,next()
为您提供table
$(document).ready(function() {
$('.toggle-btn').closest('h2').next().find("tbody").hide();
$('.toggle-btn').on('click', function() {
$(this).closest('h2').next().find("tbody").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Operating systems <span class="button small toggle-btn">Toggle</span></h2>
<table class="data" cellpadding="8" border="1">
<thead>
<tr>
<th class="first" style="width:120px">
Operating System </th>
<th class="">
Percentage </th>
</tr>
</thead>
<tbody>
<tr>
<td class="">iOS 8.4</td>
<td class="">
<div class="ui-percentage" style="width:17%">17 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.3</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.2</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.1.3</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.1</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
$('.toggle-btn').parent().next('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).parent().siblings('table').toggle();
});
});
选择器应$('.toggle-btn').parent().next('table')
演示
函数closest()
上升到元素的父级,因此它永远不会找到表。您必须执行以下操作:
$(document).ready(function() {
$('.toggle-btn').parent().parent().find('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).parent().parent().find('table').toggle();
});
});
但是,如果有多个表,这将不起作用。请考虑对表使用 id 或,以便可以直接访问它。例如:
<table id="data-table-1" class="data" cellpadding="8" border="1">
这将使javascript更简单,即:
$('.toggle-btn').on('click', function(event) {
$('#data-table-1').toggle();
});
相关文章:
- 在函数调用中封装数据除了隐藏数据之外还有什么优点
- 加载时隐藏数据表
- 通过jquery打印隐藏数据
- 我需要有关根据复选框显示和隐藏数据的帮助
- 如何在网页中嵌入隐藏数据并使用 DOM 恢复它
- 在 DOJO 中隐藏数据网格的列
- 如何隐藏数据表中的某些行
- 对恶意用户隐藏数据 JavaScript 函数
- 隐藏数据表中的记录
- 想要在 html 页面中使用 jquery 或 javascript 显示和隐藏数据
- 使用 JQuery 提交包含其他隐藏数据的 HTML 表单
- 如何在 jQuery 中隐藏数据过滤器
- jQuery DatePicker,在iOS上隐藏数据类型日期
- 如何在列表框中显示选定行的隐藏数据
- 使用AJAX提交隐藏数据
- Ng-hide当提交按钮被按下时隐藏数据
- 隐藏数据id加载和显示点击按钮
- 从DOM隐藏数据(保护数据)
- 在Highcharts中使用按钮/复选框显示/隐藏数据的示例
- 显示隐藏数据加载和复选/取消单选按钮