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

Question

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

例如,在这个论坛上,我想隐藏某些用户名的任何行(第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()区分大小写.

在线演示:(显示并运行代码段.)

$("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为您网站的有效选择器. 使用Firebug之类的工具来帮助您确定所需表的唯一jQuery选择器.
还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 ();
    }
}