如何隐藏包含某些关键字的 table 行?
How to hide table rows containing certain keywords?
阅读论坛时,我希望能够使用可自定义的关键字过滤器来隐藏某些行。
例如 this forum,我想隐藏某些用户名的所有行(第 3 列)。
只在这个网站上写一个 Greasemonkey 脚本很难吗?
或者有没有做这种事情的 Firefox 插件?
写一个用户脚本来通过关键字隐藏行并不难。
假设你有一个像这样的table:
<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 为您想要的 table。
还根据需要更改 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 ();
}
}
阅读论坛时,我希望能够使用可自定义的关键字过滤器来隐藏某些行。
例如 this forum,我想隐藏某些用户名的所有行(第 3 列)。
只在这个网站上写一个 Greasemonkey 脚本很难吗?
或者有没有做这种事情的 Firefox 插件?
写一个用户脚本来通过关键字隐藏行并不难。
假设你有一个像这样的table:
<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 为您想要的 table。
还根据需要更改 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 ();
}
}