html - How do you add one function to work differently in different elements

Question

I am trying to add a search function for every table in my page using jquery and ejs format. It is working when I use 2 same function with different ID. But it seems pointless and waste of time if I repeat the whole function for every table in the page. What do I need to do for this?

This is the code for search function.

 $(document).ready(function(){  
       $('#search').keyup(function(){  
            search_table($(this).val());  
       });  
       function search_table(value){  
            $('#table_body tr').each(function(){  
                 var found = 'false';  
                 $(this).each(function(){  
                      if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0)  
                      {  
                           found = 'true';  
                      }  
                 });  
                 if(found == 'true')  
                 {  
                      $(this).show();  
                 }  
                 else  
                 {  
                      $(this).hide();  
                 }  
            });  
       }  
  });  

And this is the ejs code

<div class="dropdown">
  <button class="button button1">Add</button>
  <button class="button button2">Edit</button>
  <form action="" class="search-form">
    <input type="search" id="search" name="search" class="search-input" />
    <i class="fa fa-search"></i>
  </form>
</div>
<br />

<table class="table table-sortable" id="pagination">
  <thead>
    <tr>
      <th>Name</th>
      <th>Category</th>
      <th>Description</th>
      <th>Date</th>

    </tr>
  </thead>
  <tbody id="table_body">
    <% for(var i=0; i < data.employeeProfile.length; i++) { %>
      <tr>
        <td>
          <%= data.employeeProfile[i].name %>
        </td>
        <td>
          <%= data.employeeProfile[i].category %>
        </td>
        <td>
          <%= data.employeeProfile[i].description %>
        </td>
        <td>
          <%= data.employeeProfile[i].date %>
        </td>

      </tr>
      <% } %>
  </tbody>
</table>

question from:https://stackoverflow.com/questions/66050924/how-do-you-add-one-function-to-work-differently-in-different-elements

Answer 1

Yes, you're right, it should be a reusable code. It's known as DRY ( Do not Repeat Yourself )

So one way of doing this is to create a function which handles the search functionality

Example :

function setSearch(inputEle, rowEle){
   $(inputEle).keyup(function(){  
        search_table(rowEle, $(this).val());  
   }); 
} 

function search_table(rowEle, value){  
    $(rowEle).each(function(){  
         var found = 'false';  
         $(this).each(function(){  
             if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0)  
             {  
                       found = 'true';  
             }  
         });  
         if(found == 'true')  
         {  
              $(this).show();  
         }  
         else  
         {  
              $(this).hide();  
         }  
    });  
 }  

Now you can set search functionality by calling setSearch for all the tables like :

setSearch('#search', '#table_body tr');