Locate the image in the table by searching for the alt attribute and then show the entire row

I am looking to use the alt attribute of images in a table to search and display the entire 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>

How can I achieve this with javascript or jquery?

javascripthtmljquerycss

Answer №1

Check out the code snippet below:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending information via HTML on an iPhone

Posting form data on a website typically involves using the following HTML code with a post request: <div id="requestinfo"> <form method="post" action="http://abc/form-post.php" id="request_form"> <input type="hidden" name="fiel ...

iphonehtmlhttp-post

Navigating the DOM with jQuery and iterating through tables without specific IDs

Coldfusion and CF markup code can be ignored as this is a jQuery question. In the table below, which can be looped over up to 200 times, users can enter a system name into the 'System Name' field and click the "CHECK" button. This triggers an aj ...

jqueryajax

Develop your own personalized Angular schematics that produces a file that begins with an underscore

Having trouble with custom Angular schematics file naming. I'm trying to create a theme SCSS file that starts with an underscore followed by a double underscore as a delimiter. For instance, I want the file name to be _mouse-theme.scss, using the nam ...

javascriptangulartypescriptsassangular-schematics

Bring in a 3D design using the three.js library

I am currently diving into learning three.js and have been closely following their documentation. However, I seem to be facing an issue when trying to import an object from Blender. Can anyone point out what might be going wrong here? I have set up the s ...

javascriptthree.js

What's causing this unexpected wrapping issue?

I must be overlooking something simple. Could someone please review this page and explain why the BYOB section is appearing on the right, rather than directly below the American section? Thank you in advance. ...

htmlcss

How to create a centered box in Bootstrap with an image and text floating to the side

Is there a way to center a box with a picture and two headlines floating to the right of it? <div class="py-1 py-sm-5"> <div class="box"> <img src="img/logo_gross.png" class="mx-auto d-block col-lg-3 col-sm-6 col-8 img-fluid float-sm ...

htmlcssbootstrap-4

Ul list centered alignment appears misaligned to the left in Safari browser exclusively

I'm experiencing an issue with my menu alignment. It appears perfectly centered in FF, Chrome, and IE, but shifts to the left in the Safari browser. I'm not sure if there is a specific CSS property I need to use to correct this alignment. <d ...

htmlcss

Which would be more advantageous: using a single setter method or multiple setter methods for objects that have a set number of fields?

As I ponder over designing a class with a member variable of type object containing a fixed number of fields, the question arises: should I opt for a single setter function or multiple setters to modify these fields? To illustrate this dilemma clearly, I ...

javascriptarchitecturereadabilitymaintainability

Extract information from an external HTML table and store it in an array

I am looking for a way to extract data from an HTML table on an external site and save it as a JSON file for further manipulation. Is there a method to retrieve table data from an external HTML site that differs from the code example provided? Additional ...

javascripthtmlarraysjsonhtml-table

What does drizzle.config.ts serve?

I've been working on setting up a project with Drizzle + Next.js + Vercel for my serverless backend. To utilize the ORM API of Drizzle, I reference my database in the following way: import { drizzle } from "drizzle-orm/vercel-postgres"; impo ...

javascriptnext.jsconfigurationverceldrizzle

What is the best method to save a function call in Context?

My goal is to set up my context with both state and a function for updating that state. Let's consider the following scenario: export default function MyComponent () { const MyContext = React.createContext() const [myState, setMyState] = use ...

javascriptreactjsreact-context

Apply CSS styling to the v-html output

I am trying to enhance the style of HTML code using a v-html but have been struggling with finding a working solution so far. Can anyone help me out? :( Below is my code snippet: Template : <div class="para" v-html="value" /> Script : exp ...

htmlcssvue.jssassvuejs2

JAVASCRIPT ENCOUNTERS ISSUE WITH RANDOM TEXT GENERATION

Utilizing an array of words, we are in the process of generating random text. The goal is to shuffle and combine these words to form new "random sentences". However, we have encountered a minor issue - the addition of "undefined" at the beginning of each p ...

javascriptarrays

Employ node's gm library in combination with promises and buffers

Using gm with Bluebird has been a bit tricky for me. Initially, I tried this approach: var gm = require('gm'); var bluebird = require('bluebird'); gm = bluebird.promisifyAll(gm); However, when attempting to execute the following code: ...

javascriptnode.jspromisegm

Having trouble properly removing an item from an array using splice() function

I'm facing an issue with an array where I need to remove a specific object. I attempted using the splice() method, but upon implementation, it ends up removing all objects except the one that was found. Here's a snippet of my JavaScript code: On ...

javascriptjqueryarraysarraylistarray-splice

Issue: $injector:modulerr encountered in ASP.Net Core

I've been attempting to integrate Angular into my ASP.NET WebAPI project. After installing angular and angular-ui-router using npm, I added all the necessary scripts to my default.html file for both development and staging/production environments. Fo ...

javascriptangularjsasp.net-core.net-core

The Vimeo player JavaScript API is experiencing issues on iOS devices

I am facing an issue where the API for playing a video only works on iOS after the play button is clicked in the player. However, it works fine on desktop and Chrome for Android. http://codepen.io/bdougherty/pen/JgDfm $(function() { var iframe = $(&a ...

javascriptiosmobile-safarivimeo-playervimeo-ios

Error SCRIPT438: Property or method not supported by object in Internet Explorer

Within my application, there is an option for users to deactivate their profiles, which can only be reactivated by the admin. I have created a class called ActivateProfile with two methods: userExist(userName) to check if a user with the given userName ...

javascriptinternet-explorer

How to make a textarea that dynamically adjusts size based on amount of text inputted (using pure JavaScript, without jQuery)

As a server-side developer, I am venturing into the world of vanilla JS to expand my skillset. My current challenge involves creating a form where textareas are initially hidden behind button clicks and resize as more text is entered. This task is pushing ...

javascript

Identifying the mobile browser initiating the request call

I'm in the process of creating a website that needs to be compatible with various devices such as iPhone, Android, Samsung Galaxy S/S2, iPad, Samsung Galaxy Tab, and more. Is there a method to identify the mobile browser requesting the page and apply ...

javascriptjqueryhtmlcss