JSFiddle - React, Tailwind, and code Playground

by revzephyr

HTML

<body>
  <div>
    <input type="text" id="search-criteria">
  </div>
  <br>
  <br>
  <table id="image">
    <tr>
      <td>Number</td>
      <td>Name</td>
      <td>Type</td>
      <td>Images</td>
    </tr>
    <tr>
      <td>01</td>
      <td>Apple</td>
      <td>Red</td>
      <td>
        <img src="http://deliver.commons.nicovideo.jp/thumbnail/nc25035">
        <img src="https://en.opensuse.org/images/1/1d/Skype-icon-128x128.png">
        <img src="http://www.mouserunner.com/images/WindowsIconPreview_128x128.png">
      </td>
    </tr>
    <tr>
      <td>01</td>
      <td>Orange</td>
      <td>Orange</td>
      <td>
        <img src="http://icons.iconarchive.com/icons/marcus-roberto/google-play/128/Google-Chrome-icon.png">
        <img src="http://deliver.commons.nicovideo.jp/thumbnail/nc25035">
        <img src="https://en.opensuse.org/images/1/1d/Skype-icon-128x128.png">
      </td>
    </tr>
    <tr>
      <td>01</td>
      <td>Berries</td>
      <td>Undefine</td>
      <td>
        <img src="">
        <img src="">
        <img src="">
        <img src="">
      </td>
    </tr>
  </table>
</body>

CSS

table,
tr,
td {
  border-collapse: collapse;
  border: 1px solid;
}

JavaScript

$("table#image>tbody>tr").addClass("imgbox");

$("#search-criteria").on("keyup", function() {
  var g = $(this).val().toLowerCase();
  $(".imgbox").each(function() {
    var s = $(this).text().toLowerCase();
    $(this).closest('.imgbox')[s.indexOf(g) !== -1 ? 'show' : 'hide']();
  });
});

$(function() {
  $("img.lazy").lazyload();
});