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

Question

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

<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：不是正确的选择器

只需选择具有正确样式属性的所有跨度。然后隐藏该范围的父<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

Answer 2

可能有点过头但有效（虽然在这种特殊情况下我无法找到自己更短的解决方案）。问题是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（更新）