如何隐藏包含特定关键字的表格行？ [英] How to hide table rows containing certain keywords?

问题描述

在阅读论坛时，我希望能够定制关键字过滤器来隐藏某些行。 此论坛 ，我想隐藏某些用户名（第三列）的任何行。

难道只有在这个网站上写一个Greasemonkey脚本才能做到这一点？

还是有一个Firefox插件可以做到这一点

解决方案

假设你有这样一个表：

 < table class =filterMe> < TR> 
 Post< / th> 
< th>标题< / th> 
< th>作者< / 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讲希腊语！< / td> 
< td> Ethel< / td> 
< / tr> < TR> 
< td> 3< / td> 
< td>您继续使用该功能。我不认为这是你所想的。< / td> 
< td> Inigo Montoya< / td> 
< / tr> 
< / table> 
  

您想要隐藏包含 Fred的行。
使用 jQuery 的强大功能，您可以用一行代码来完成：

  $（。filterMe tr：contains（'Fred'））。hide（）; 
  

如果您想将匹配限制在第三列（本例中为Author）使用：

  $（。filterMe td：nth-​​of-type（3）：contains（'Fred'）） .parent（）.hide（）; 
  

请注意 ：contains（）是区分大小写的

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

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 /库/ jquery的/ 2.1.1 / jquery.min.js>< /脚本><形式> < label>过滤文本：< input type =textid =filterTxtInpvalue =Fred>< / label> < button type =submit>过滤行< / button>< / form>< table class =filterMe> < TR> <的第i;邮政和LT; /第> <的第i;标题< /第> <的第i;作者< /第> < / TR> < TR> < TD→1< / TD> < td> Lorem ipsum dolor sit amet，consectetur adipiscing elit。< / td> < TD>佛瑞德< / TD> < / TR> < TR> < TD> 2'; / TD> < td> Fred讲希腊语！< / td> < TD>埃塞尔< / TD> < / TR> < TR> < TD> 3'; / TD> < td>继续使用该功能。我不认为这是你所想的。< / td> < td> Inigo Montoya< / td> < / table>

$ b






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

  // == UserScript == 
 // @name _Hide Table行关键字
 // @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 == 
 / *  -  @需要授予指令来解决GM 1.0中引入的设计更改
。它恢复沙箱。 
 * / 
 $（。filterMe td：nth-​​of-type（3）：contains（'Fred'））。parent（）.hide（）; 
  

重要提示：您需要替换 .filterMe ，为您的网站添加一个有效的选择器。 使用Firebug之类的工具来帮助您确定一个独特的jQuery选择器用于所需的表格。

还可以根据需要更改 nth-of-type（）索引。

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

  // == UserScript == 
 // @name _Hide Table关键字行
 // @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 == 
 / *  - 需要使用@grant指令来解决设计更改在GM 1.0中引入
。它恢复沙箱。 
 * / 
 waitForKeyElements（
.filterMe td：nth-​​of-type（3）：contains（'Fred'），hideTargetdRow 
）; 
 
函数hideTargetdRow（jNode）{
 jNode.parent（）.hide（）; 
 
 code $ 
 
 
 
 $ b < h2>多个关键字：

  // == UserScript == 
 // @name _Hide表按行
 // @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 == 
 / *  - 需要@grant指令来解决GM 1.0中引入的设计更改
。它恢复沙箱。 
 * / 
 var keywords = [
Apple，
existentialism
]; 
 var keyW_Regex = new RegExp（keywords.join（'|'），i）; //  - 我使其不区分大小写。 
 
 waitForKeyElements（
.filterMe td：nth-​​of-type（3），hideTargetedRowAsNeeded 
）; 
 
函数hideTargetedRowAsNeeded（jNode）{
 if（keyW_Regex.test（jNode.text（）））{
 jNode.parent（）.hide（）; 
} 
} 
  

When reading forums, I'd like to be able to have customizable keyword filters to hide certain rows.

For example on this forum, I'd like to hide any rows for certain usernames (3rd column).

Is it difficult to write a Greasemonkey script that could do this, only on this site?
Or is there a Firefox addon that does this kind of thing?

解决方案

It is not hard to write a userscript to hide rows by keyword.

Suppose you had a table like this:

<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>

And you wanted to hide rows that contained Fred.
Using the awesome power of jQuery, you could do that with one line:

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

If you wanted to restrict the match to the 3rd column (Author, in this case), you could use:

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

Please note that :contains() is case-sensitive.

Online demo: (Show and run the code snippet.)

$("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>

Use this in a userscript, like so:

// ==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 ();

IMPORTANT: You need to replace .filterMe with a valid selector for your site. Use tools like Firebug to help you determine a unique jQuery selector for your desired table.
Also alter the nth-of-type() index as needed.

Or, for an AJAX-driven site:

// ==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 ();
}

For multiple keywords:

// ==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 ();
    }
}

这篇关于如何隐藏包含特定关键字的表格行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！