jQuery：如何以编程方式隐藏 TableTools 按钮

Posted 2023-05-09

【中文标题】jQuery：如何以编程方式隐藏 TableTools 按钮

【英文标题】：jQuery: how to hide TableTools buttons programmatically

【发布时间】：2014-08-07 03:08:21

【问题描述】：

我正在使用最新版本的 jQuery 插件 DataTables 和 TableTools（来源：https://datatables.net/extensions/tabletools/）。

我已将其设置为显示两个标准按钮，一个用于选择所有行，一个用于取消选择所有行。 到目前为止，一切都按预期工作。

现在我想在我的页面中添加一个简单的按钮，以编程方式隐藏这两个按钮。 在 Firebug 中对它们进行调查显示如下：

<div class="DTTT_container">
    <a id="ToolTables_queueTable_0" class="DTTT_button DTTT_button_text" title="select all rows">
        <span>Select All</span>
    </a>
    <a id="ToolTables_queueTable_1" class="DTTT_button DTTT_button_text DTTT_disabled" title="deselect all rows">
        <span>Deselect All</span>
    </a>
</div>

基于此，我尝试使用“DTTT_button”类和唯一 ID 来隐藏它们，但在这两种情况下我都无法这样做。

$('#myButton').on('click', function() 
    $('.DTTT_button').hide();
);

$('#myButton').on('click', function() 
    $('#ToolTables_queueTable_0').hide();
    $('#ToolTables_queueTable_1').hide();
);

有没有人知道用不同的方法来实现这一点？

【参考方案1】：

尝试使用 css 属性隐藏 div

$('#myButton').on('click', function() 
    $('#ToolTables_queueTable_0').css("visibility","hidden");
    $('#ToolTables_queueTable_1').css("visibility","hidden");
);

【参考方案2】：

如果您的 div 设置了 visibility 属性，则 hide 和 show 不起作用。

另一件事应该是：

如果在您的样式中使用 !important，例如 display: none !important， 有必要使用 .css("display", "block !important") 如果您希望 .show() 正常运行。

参考here

尝试通过 jquery 更改 visibility 或 display 属性

$('#ToolTables_queueTable_0').css("visibility","hidden");

或

$('#ToolTables_queueTable_0').css("display","none");

【讨论】：

也非常感谢！

在初始化期间小心使用display。我在“csv”按钮上使用了display: none，同时加载了 ajax 数据（以免用户保存一个空表单），然后在完成后将其删除，但按钮无法正常工作，不知道为什么。改用visibility: hidden 就成功了。