テキスト入力ボックスが 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 を含むテーブル全体を非表示にしたいと考えています。
どうすればそれを手に入れることができますか?