jQuery - 切换按钮显示/隐藏表格数据答案

【问题标题】：jQuery - toggle button show/hide table datajQuery - 切换按钮显示/隐藏表格数据
【发布时间】：2016-02-03 10:32:15
【问题描述】：

我需要一些帮助。

<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>

我怎样才能使这项工作正确？

【问题讨论】：

发生了什么错误？
您的错误按钮（跨度）不是表格元素的后代。至少你应该检查过有关closest() 方法的文档......现在你得到了多少张桌子？如果只有一次，直接定位，否则使用相关的横向方法，例如：$(this).closest('h2').next().toggle();
@guradio：不，我没有发现任何错误
您应该使用.parent() 获取父级，然后使用.siblings()，因为该表是按钮父级的兄弟
@guradio：你的意思是：$('.toggle-btn').siblings('table').hide();??

标签： javascript jquery html

【解决方案1】：

为什么不直接使用切换功能呢？

$(document).ready(function() {
    $('table').hide();
    $('.toggle-btn').on('click', function() {
        $('table').toggle();
    });
});

【讨论】：

这将隐藏页面中的每个表格
我也这么认为@A.Wolff 直接方法
@mikeyq6 OP 甚至没有提到 cmets 中询问了 OP 有多少张桌子。 OP缺乏信息
@mikeyq6 看起来 OP 只有一张桌子，不知道他在做什么/正在做什么。编辑：我在 OP 中看到评论 // I want to target the table right after the button 所以我可能是错的，但我在评论中问了两次，仍然没有得到任何答案......
@A.Wolff 我认为这应该被接受的答案:)。让它简单然后通用。 ;)

【解决方案2】：

如果你只有一个 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>

【讨论】：

是的，它似乎工作，但我怎样才能只折叠/展开 tbody 部分而不是所有 table ??
@Lykos 我已经更新了找到tbody 的答案，请检查。
是的，它完全按照我的意愿工作！感谢您的帮助！ :-)
如果你只是想隐藏表格主体 $('tbody').hide() 就足够了，如果你决定更改 h2 标签或在标签和桌子……

【解决方案3】：

$(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')

DEMO

【讨论】：

我没有投反对票，但使用兄弟姐妹可以匹配所有兄弟表，而不仅仅是相关的表。如果只有一个，那就无所谓了
@A.Wolff 是的，你说得对，但由于示例只是我没有考虑过这种情况，我将添加更多详细信息，如 id，以便指向正确的表
不管怎样，如果只有一张表，直接使用相关的选择器来定位它，不需要使用昂贵的横向方法
@A.Wolff 我使用了.next() 来确保选择下一张桌子

【解决方案4】：

函数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();
});

【讨论】：