JSFiddle - React, Tailwind, and code Playground

by chintansoni

HTML

<table border =1 cellspacing="1" cellpadding="1" style="width:100%">
    <tr><th>ID</th><th>Name</th><th>Marks</th></tr>
      <tr>
        <td>22</td>
        <td>Smith</td>      
        <td>50</td>
      </tr>
      <tr>
        <td>23</td>
        <td>Jackson</td>        
        <td>94</td>
      </tr>
      <tr>
        <td>45</td>
        <td>Doe</td>        
        <td>80</td>
      </tr>
    <tr>
        <td>24</td>
        <td>Doe</td>        
        <td>80</td>
      </tr>
    <tr>
        <td>25</td>
        <td>Doe</td>        
        <td>80</td>
      </tr>
    <tr>
        <td>29</td>
        <td>Doe</td>        
        <td>80</td>
      </tr>
    </table>

    <input type="checkbox" name="vehicle" value="22"> 22<br>
    <input type="checkbox" name="vehicle" value="23"> 23 <br>
    <input type="checkbox" name="vehicle" value="24"> 24<br>
    <input type="checkbox" name="vehicle" value="25"> 25 <br>
    <input type="checkbox" name="vehicle" value="29"> 29<br>
    <input type="checkbox" name="vehicle" value="45"> 45 <br>

JavaScript

// for searching <table> on the base of <td> and value
$(function() {
      $('input[type="checkbox"]').change(function() {
        // We check if one or more checkboxes are selected
        // If one or more is selected, we perform filtering
        if($('input[type="checkbox"]:checked').length > 0) {
          // Get values all checked boxes
          var vals = $('input[type="checkbox"]:checked').map(function() {
            return this.value;
          }).get();

          // Here we do two things to table rows
          // 1. We hide all
          // 2. Then we filter, show those whose value in first <td> matches checkbox value
          $('table tr')
          .hide()    // 1
          .filter(function() {    // 2
            return vals.indexOf($(this).find('td:first').text()) > -1;
          }).show();
        } else {
          // Show all
          $('table tr').show();
        }
      });
    });