특정 키워드가 포함 된 표 행을 숨기는 방법은 무엇입니까?

키워드로 행을 숨기는 사용자 스크립트를 작성하는 것은 어렵지 않습니다.

다음과 같은 테이블이 있다고 가정합니다.

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

일치를 세 번째 열 (이 경우 Author)로 제한하려면 다음을 사용할 수 있습니다.

$(".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에서 이것을 사용하십시오.

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