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

Question

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

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

我有像这样使用 javascript 的简单搜索代码:

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

我想要制作 $table.not('.t_head').hide()更改为标签内的文本 <td>并制作这样的文字 Sorry, bla bla bla .

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

我输入后结果为false

Answer 1

使用整个表体来搜索文本，所以如果它返回 -1 你可以用它来否定和切换显示消息的元素(我把它作为一个额外的行，即在加载时隐藏)关于没有结果。

此外，您可以使用 .toggle() 代替条件 block 来简化代码并将选择限制在表格元素的 tbody 中，以避免过滤表格元素的 thead。

最后，使用 jQuery 的 .filter() 遍历选择并仅返回满足条件的那些:

$(document).ready(function(){

 var tableRows = $('#fid_table tbody tr');
 var table = $('#fid_table tbody');
 var noResults = $('.no-results');
 noResults.hide();
 
$('#search_field').on('keyup', function() {

     var value = $(this).val().toLowerCase();
     var patt = new RegExp(value, "i");
    
    tableRows.filter(function() {
      var toggle = $(this).text().toLowerCase().search(patt) > -1;
      $(this).toggle(toggle );
    });
    
    var noResultsToggle = table.text().toLowerCase().search(patt) === -1;
    noResults.toggle(noResultsToggle);
 
   
 });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
         <tfoot>
             <tr class="no-results">
              <td colspan="3" align="center">
               Sorry, there are no results for given search string
               </td>
           </tr>
        </tfoot>
      </table>
    </div>
</div>