使用 alt 属性搜索 img 表并显示整行

Question

I want to search images from the table using its alt attribute and display the whole row using javascript or jquery.

<div class="input-group">
    <span class="input-group-addon">Filter</span>
    <input id="filter" type="text" class="form-control" placeholder="Search Airline here">
</div>

<table class="customTable">
   <thead>
      <tr>
         <th>Airline</th>
         <th>Authorized Laboratories</th>
         <th>Duration for PCR before flight</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><img src="http://www.timestravel.com/images/airlines/EY.png" alt="etihad" width="174" border="0" style="display:block; margin-left: auto; margin-right: auto; width: 70%;" /></td>
         <td>
            <ul>
               <li>Chughtai Lab</li>
               <li>Agha Khan Laboratory</li>
               <li>Shaukat Khanum</li>
               <li>Dr Essa Labroratory</li>
               <li>Islamabad Diagnostic Center</li>
               <li>Excel Lab</li>
            </ul>
         </td>
         <td>96 Hours</td>
      </tr>

what might be its javascript or jquery?

Answer 1

Try below code.

 $("#filter").on("keyup", function() { var q = $(this).val(); if(q == '') { $(".customTable").find("tbody tr").removeClass("hidden"); } else { $(".customTable").find("tbody tr img").each(function() { if($(this).attr("alt").indexOf(q) == -1) { $(this).closest('tr').addClass("hidden"); } }); } });

 .hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="input-group"> <span class="input-group-addon">Filter</span> <input id="filter" type="text" class="form-control" placeholder="Search Airline here"> </div> <table class="customTable" border="1"> <thead> <tr> <th>Airline</th> <th>Authorized Laboratories</th> <th>Duration for PCR before flight</th> </tr> </thead> <tbody> <tr> <td><img src="http://www.timestravel.com/images/airlines/EY.png" alt="etihad" width="174" border="0" style="display:block; margin-left: auto; margin-right: auto; width: 70%;" /></td> <td> <ul> <li>Chughtai Lab</li> <li>Agha Khan Laboratory</li> <li>Shaukat Khanum</li> <li>Dr Essa Labroratory</li> <li>Islamabad Diagnostic Center</li> <li>Excel Lab</li> </ul> </td> <td>96 Hours</td> </tr> <tr> <td><img src="http://www.timestravel.com/images/airlines/EY.png" alt="Emirates" width="174" border="0" style="display:block; margin-left: auto; margin-right: auto; width: 70%;" /></td> <td> <ul> <li>Chughtai Lab</li> <li>Agha Khan Laboratory</li> <li>Shaukat Khanum</li> <li>Dr Essa Labroratory</li> <li>Islamabad Diagnostic Center</li> <li>Excel Lab</li> </ul> </td> <td>96 Hours</td> </tr> </tbody> </table>