JavaScript How to change content inside table when condition search is false using javascript change content inside div jquery,change content inside iframe,change

I have a code for table and search text :

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

And I have simple search code using javascript like this :

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

Before I input text on search field

After I input and the result is false

After I input and the result is false

Answer:1

Use the whole table body to search for the text, so if it returns -1 you could use it to negate and toggle the element that shows the message ( I have placed it as an additional row, that is hidden on load) about no results.

Also, you could use a .toggle(), instead of the conditional block to simplify the code and constrain the selection to the tbody of the table element, to avoid filtering the thead of the table element.

And finally, use the jQuery's .filter() to iterate through selection and return only those that fulfill the conditions:

$(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>
Answer:2

I have some problems with css manipulation with jQuery. Here is what I need to do. I have these three picture. Each are a representation of a person. When we click on one of those, this div appears: ...

I have some problems with css manipulation with jQuery. Here is what I need to do. I have these three picture. Each are a representation of a person. When we click on one of those, this div appears: ...

I am working on a javascript problem for fun that is supposed to take a string and return nested arrays that contain one array for every character that repeats. The groups should have the following ...

I am working on a javascript problem for fun that is supposed to take a string and return nested arrays that contain one array for every character that repeats. The groups should have the following ...

  1. finding last index of string in java
  2. finding last index of a string in oracle

I've got a small problem in my javascript which i am stuck on for a while now. What i did is : Create an empty table. Generate the tr/td tags and values inside the table(from JSON-object). for (...

I've got a small problem in my javascript which i am stuck on for a while now. What i did is : Create an empty table. Generate the tr/td tags and values inside the table(from JSON-object). for (...

I have am trying to create jQuery code which adds a active-menu class to a link whenever I click on it. However I need to check first if it already has the class before adding. I only need the link ...

I have am trying to create jQuery code which adds a active-menu class to a link whenever I click on it. However I need to check first if it already has the class before adding. I only need the link ...