Блог

Главная - Вопросы по программированию - поиск таблицы для img с использованием атрибута alt и отображение всей строки

поиск таблицы для img с использованием атрибута alt и отображение всей строки

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я хочу искать изображения из таблицы, используя ее атрибут alt, и отображать всю строку с помощью javascript или 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>

каким может быть его javascript или jquery?

Ответ №1:

Попробуйте приведенный ниже код.

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

Комментарии:

1. можно ли это сделать со всем текстом от td до b, который также был найден? погода в верхнем или нижнем классе с атрибутами alt также остается доступной для поиска?

2. Да, вы можете использовать :contains() селектор jQuery для сопоставления текста td . w3schools.com/jquery/sel_contains.asp