如何隐藏包含特定关键字的表格行？

Question

在阅读论坛时，我希望能够使用可自定义的关键字过滤器来隐藏某些行。

例如，在this forum上，我想隐藏某些用户名的任何行（第3列）。

编写一个只能在此站点上执行此操作的Greasemonkey脚本是否很困难？ 或者是否有一个Firefox插件可以做这种事情？

Answer 1

编写用户脚本以按关键字隐藏行并不困难。

假设您有一个这样的表：

<table class="filterMe"> <tr>
        <th>Post</th>
        <th>Title</th>
        <th>Author</th>
    </tr> <tr>
        <td>1</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        <td>Fred</td>
    </tr> <tr>
        <td>2</td>
        <td>Fred speaks Greek!</td>
        <td>Ethel</td>
    </tr> <tr>
        <td>3</td>
        <td>You keep using that function. I do not think it does what you think it does.</td>
        <td>Inigo Montoya</td>
    </tr>
</table>

并且您想要隐藏包含Fred的行 使用jQuery的强大功能，你可以用一行来做到这一点：

$(".filterMe tr:contains('Fred')").hide ();

如果您想将匹配限制在第3列（在本例中为作者），您可以使用：

$(".filterMe td:nth-of-type(3):contains('Fred')").parent ().hide ();

请注意:contains() is case-sensitive.

在线演示:(显示并运行代码段。）

$("form").submit ( function (evt) {
    evt.preventDefault ();     //-- Stop normal form submit.
    $(".filterMe tr").show (); //-- Reset row display:

    var filterTerm      = $("#filterTxtInp").val ();
    var targJQ_Selector = ".filterMe td:nth-of-type(3):contains('" + filterTerm + "')";

    //-- Hide the desired rows.
    $(targJQ_Selector).parent ().hide ();
} );

table           { border-collapse: collapse; }
table, td, th   { border: 1px solid gray; }
td, th          { padding: 0.3ex 1ex;  text-align: left; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label>Filter Text:<input type="text" id="filterTxtInp" value="Fred"></label>
    <button type="submit">Filter rows</button>
</form>

<table class="filterMe"> <tr>
        <th>Post</th>  <th>Title</th>  <th>Author</th>
    </tr> <tr>
        <td>1</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        <td>Fred</td>
    </tr> <tr>
        <td>2</td>
        <td>Fred speaks Greek!</td>
        <td>Ethel</td>
    </tr> <tr>
        <td>3</td>
        <td>You keep using that function. I do not think it does what you think it does.</td>
        <td>Inigo Montoya</td>
    </tr>
</table>

在用户脚本中使用它，如下所示：

// ==UserScript==
// @name     _Hide Table Rows by keyword
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
$(".filterMe td:nth-of-type(3):contains('Fred')").parent ().hide ();

重要提示：您需要将.filterMe替换为您网站的有效选择器。 Use tools like Firebug to help you determine a unique jQuery selector为您所需的表格。
根据需要更改nth-of-type()索引。

或者，对于AJAX驱动的网站：

// ==UserScript==
// @name     _Hide Table Rows by keyword
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
waitForKeyElements (
    ".filterMe td:nth-of-type(3):contains('Fred')", hideTargetdRow
);

function hideTargetdRow (jNode) {
    jNode.parent ().hide ();
}

对于多个关键字：

// ==UserScript==
// @name     _Hide Table Rows by keyword
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
var keywords    = [
    "Apple",
    "existentialism"
];
var keyW_Regex  = new RegExp (keywords.join('|'), "i"); //-- The "i" makes it case insensitive.

waitForKeyElements (
    ".filterMe td:nth-of-type(3)", hideTargetedRowAsNeeded
);

function hideTargetedRowAsNeeded (jNode) {
    if (keyW_Regex.test (jNode.text () ) ) {
        jNode.parent ().hide ();
    }
}