创建按钮，切换不包含特定文本颜色的 table 行的可见性

Question

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

<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

Answer 1

2 个问题：

1。您没有导入 jQuery.

解决这个问题。

2。 span:not不对select或

只需 select 所有具有正确样式属性的 span。然后隐藏该跨度的父 <tr>。

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

编辑：

这是隐藏非彩色 span 的代码。

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

JSFiddle

Answer 2

可能有点过头但有效（尽管在这种特殊情况下我找不到更短的解决方案）。问题是 css('color') returns 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（已更新）

创建按钮，切换不包含特定文本颜色的 table 行的可见性

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

javascript

css

jquery

filter

datatables

1。您没有导入 jQuery.

2。 span:not不对select或

编辑：

JSFiddle