jQuery的：如何根据文本输入隐藏表 [英] jquery: how to hide tables depending on text input

问题描述

我有一个文字输入框

 < input type =textid =search/> 
  

和多个HTML表格像这样：

 < table id =table1> 
< thead> 
< tr> 
< th>表1标题< / th> 
< / tr> 
< tr> 
< th>名称< / th> 
< th>国家< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td> Andrew< / td> 
< td>美国< / td> 
< / tr> 
< tr> 
< td> John< / td> 
< td>加拿大< / td> 
< / tr> 
< / tbody> 
< / table> 
  

我想根据输入框中的用户类型来过滤数据。
$ b

现在我的JS代码是：

$ $ $ $ $ $ $（document）.ready（function（）{
$ b $（＃search）。keyup（function（）{
//输入值不为空时
if（$（this）.val（） （）;
{
//只显示匹配的TR，隐藏其余的
$（＃table1> tbody> tr）。hide（）;
$（＃table1 td：contains-ci（'+ $（this）.val（）+'））。parent（tr）。show（）;
} else {
//当没有输入或再次清理时，显示所有内容
$（＃table1 tbody> tr）。show（）;
}
}）;
}）;

// jQuery表达式不区分大小写的过滤器
$ .extend（$。expr [：]，
{
contains-ci：function （elem，i，match，array）
{
return（elem.textContent || elem.innerText || $（elem）.text（）||）.toLowerCase（）。indexOf （match [3] ||）.toLowerCase（））> = 0;
}
}）;

一切正常。

我想隐藏一个包括thead TR在内的整个表格。

我怎样才能得到它？

<解决方案

试试 Demo

kbd>

  $（＃search）。keyup（function（）{
 var txtVal = $ ）.val（）; 
 if（txtVal！=）{
 $（。tblDetails）。show（）; 
 $（。message）。remove（） ; 
 $ .each（$（'。tblDetails'），function（i，o）{
 var match = $（td：contains-ci（'+ txtVal +'）这个）; 
 if（match.length> 0）$（match）.parent（tr）。show（）; 
 else $（this）.hide（）; 
 }）; 
} else {
 //当没有输入或再次清理时，显示所有内容
 $（tbody> tr，this）.show（）; 
} 
 if（$（'。tblDetails：visible ）.length == 0）
 {
 $（'＃search'）。after（'< p class =message>抱歉没有找到结果!!!< / p>' ）; 
} 
}）; 
 
 // jQuery表达式用于不区分大小写的过滤器
 $ .extend（$。expr [：]，{
contains-ci：function（elem，i （）匹配数组）{
 return（elem.textContent || elem.innerText || $（elem）.text（）||）.toLowerCase（）。indexOf（（match [3] || ）.toLowerCase（））> = 0; 
} 
}）; 
  

I have one text input box

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

and multiple HTML-tables like this:

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

I want to filter data depending on what user types in the input box.

Now my JS code is:

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

Everything works OK.

But now I want to hide a whole table including thead TR's if a typed text is not in the table.

How can I get that?

解决方案

Try this Demo

     $("#search").keyup(function () {
    var txtVal = $(this).val();
    if (txtVal != "") {
        $(".tblDetails").show();
        $(".message").remove();
        $.each($('.tblDetails'), function (i, o) {
            var match = $("td:contains-ci('" + txtVal + "')", this);
            if (match.length > 0) $(match).parent("tr").show();
            else $(this).hide();
        });
    } else {
        // When there is no input or clean again, show everything back
        $("tbody > tr", this).show();
    }
    if($('.tblDetails:visible').length == 0)
    {
        $('#search').after('<p class="message">Sorry No results found!!!</p>');
    }
});

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

这篇关于jQuery的：如何根据文本输入隐藏表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！