使用JavaScript进行条件搜索为假时如何更改表内的内容

我有一个用于表格和搜索文本的代码:

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

And I want make $table.not('.t_head').hide() change to text inside tag <td> and make a text like this Sorry, bla bla bla.

Before I input text on search field

在搜索字段上输入文字之前

After I input and the result is false

输入后结果为假

评论
  • xiste
    xiste 回复

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

    请尝试以下方式:

    $('#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.hide();
                 $('#message').show()
             }
             else if((result >= 0)) {
                 $('#message').hide();
                 $(this).show();
             }
         });
     });
    <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">
          <div id="message" style="display:none">Sorry, no data!</div>
          <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>