1

テキスト入力ボックスが 1 つある

<input type="text" id="search" />

そして、次のような複数の HTML テーブル:

<table id="table1">
<thead>
        <tr>
                <th>Table1 title</th>
        </tr>
        <tr>
                <th>Name</th>
                <th>Country</th>
        </tr>
</thead>
<tbody>
        <tr>
                <td>Andrew</td>
                <td>USA</td>
        </tr>
        <tr>
                <td>John</td>
                <td>Canada</td>
        </tr>
</tbody>
</table>

ユーザーが入力ボックスに入力した内容に応じてデータをフィルター処理したいと考えています。

今私のJSコードは次のとおりです。

$(document).ready(function(){

$("#search").keyup(function(){
        // When value of the input is not blank
        if( $(this).val() != "")
        {
                // Show only matching TR, hide rest of them
                $("#table1 > tbody > tr").hide();
                $("#table1 td:contains-ci('" + $(this).val() + "')").parent("tr").show();
         } else {
                // When there is no input or clean again, show everything back
                $("#table1 tbody > tr").show();
                }
        });
});

// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
        "contains-ci": function(elem, i, match, array)
        {
                return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
        }
});

すべて正常に動作します。

しかし、入力されたテキストがテーブルにない場合、広告 TR を含むテーブル全体を非表示にしたいと考えています。

どうすればそれを手に入れることができますか?

4

1 に答える 1