“创建”按钮，用于切换不包含特定文本颜色的表行的可见性

Create button that toggles visibility of table rows that do not contain specific text color

本文关键字：颜色 文本 可见性 包含特 按钮 创建 用于      更新时间：2023-09-26

我正在使用DataTables jQuery插件来格式化<table>，我想创建一个按钮来切换不包含<span> #bfbfff 的任何<tr>的可见性。该表的结构如下：

<a id="notes">Filter</a>
<table id="qpidvulh_to-do_list">
    <tr>
        <td>
            <span style="color: #bfbfff">Content</span>
        </td>
    </tr>
    <tr>
        <td>
            <span>Content</span>
        </td>
    </tr>
</table>

到目前为止，我想出的jQuery不起作用：

$("a#notes").on("click", function() {
    if ($('#qpidvulh_to-do_list tr span:not').css('color') == '#bfbfff') {
        $(this).parent("tr").toggle();
    }
} );

JSFiddle

2 个问题：

1. 您没有导入 jQuery。

修复它。

2.跨度：不是正确的选择器

只需选择具有正确样式属性的所有范围即可。然后隐藏该范围的父<tr>。

$("#qpidvulh_to-do_list tr td span[style='color:#b3b3ff;']").closest("tr").toggle();

编辑：

下面是隐藏的非彩色跨度的代码。

$("#qpidvulh_to-do_list tr").toggle();
$("#qpidvulh_to-do_list tr td span[style='color:#b3b3ff;']").closest("tr").toggle();

JSFiddle

可能有点

过头了，但有效（尽管在这种特殊情况下我找不到更短的解决方案）。问题是css('color')以 RGB 格式返回颜色。

$("a#notes").on("click", function() {
    $('#qpidvulh_to-do_list tr span').each(function(){
        if ($(this).css('color') != 'rgb(191, 191, 255)') {
            $(this).closest("tr").toggle();
        }
    })
});

编辑

即使 style 属性包含多个属性和空格，也可以使用它，例如：<span style="color : #bfbfff; font-size:20px;">

JSFiddle（更新）

相关文章：