如何使用javascript在条件搜索为false时更改表内的内容

我有表格和搜索文本的代码：

<div class="table-responsive">
   Search Data : <input type="text" class="txtSearch" id="search_field">
   <div class="tableFixHead">
      <table id="fid_table" class="ui celled table" style="width:100%">
         <thead>
           <tr class="t_head">
             <th>No</th>
             <th>Name</th>
             <th>Gender</th>
         </thead>
         <tbody>
           <tr>
             <td>1</td>
             <td>John</td>
             <td>Male</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Lily</td>
             <td>Female</td>
           </tr>
           <tr>
             <td>3</td>
             <td>Joe</td>
             <td>Male</td>
           </tr>
         </tbody>
      </table>
    </div>
</div>

我想制作

$table.not（'.t_head'）.hide（）

更改为标签内的文本

并制作如下文本

对不起，bla bla bla

在搜索字段中输入文本之前

---

在我输入后，结果为false

您可以在消息中包含一个元素。根据条件显示/隐藏该元素：

请尝试以下方法：

$（'search_field'）。在（'keyup'，function（）上{
var值=$（this.val（）；
var patt=新的RegExp（值“i”）；
$（'fid_table'）。查找（'tr'）。每个（函数（）{
var$表=$（此）；
var result=$table.find（'td'）.text（）.search（patt）；
如果（！（结果>=0））{
$table.hide（）；
$（'#message'）.show（）
}
否则如果（（结果>=0））{
$（“#消息”）.hide（）；
$（this.show（）；
}
});
});

搜索数据：
对不起，没有数据！
不
名称
性别
1.
约翰
男性
2.
百合花
女性
3.
乔
男性
使用整个表体搜索文本，因此如果它返回
-1
，您可以使用它否定并切换显示消息的元素（我已将其作为附加行放置，在加载时隐藏），表示没有结果

此外，您可以使用
.toggle（）
，而不是条件块来简化代码并将选择约束到table元素的
tbody
，以避免筛选table元素的
thead

最后，使用jQuery的
.filter（）
迭代选择并仅返回满足条件的选项：


$（文档）.ready（函数（）{
var tableRows=$（'fid#U table tbody tr'）；
变量表=$（'fid#u table tbody'）；
var noResults=$（'无结果'）；
noResults.hide（）；
$（“#搜索_字段”）。在（'keyup'，function（）上{
var value=$（this.val（）.toLowerCase（）；
var patt=新的RegExp（值“i”）；
tableRows.filter（函数（）{
var toggle=$（this.text（）.toLowerCase（）.search（patt）>-1；
$（此）.toggle（切换）；
});
var noResultsToggle=table.text（）.toLowerCase（）.search（patt）=-1；
noResults.toggle（noResultsToggle）；
});
});

搜索数据：
不
名称
性别
1.
约翰
男性
2.
百合花
女性
3.
乔
男性
抱歉，没有给定搜索字符串的结果

 $('#search_field').on('keyup', function() {
     var value = $(this).val();
     var patt = new RegExp(value, "i");

     $('#fid_table').find('tr').each(function() {
         var $table = $(this);
         var result = $table.find('td').text().search(patt);

         if (!(result >= 0)) {
             $table.not('.t_head').hide();
         }
         if ((result >= 0)) {
             $(this).show();
         }
     });
 });