JSFiddle - React, Tailwind, and code Playground

by Boopathi Rajan

HTML

<select id="first">
    <option>Show all</option>
    <option>raja</option>
    <option>john</option>
</select>

<select id="second">
    <option>Show all</option>
    <option>english</option>
    <option>tamil</option>
</select>

<table border="1" id="test">
    <thead>
        <th>Name</th>
        <th>subject</th>
        <th>mark</th>
    </thead>
    <tbody>
    <tr>
        <td>raja</td>
        <td>english</td>
        <td>85</td>
   </tr>
 <tr>
        <td>raja</td>
        <td>tamil</td>
        <td>80</td>
   </tr>
         <tr>
        <td>john</td>
        <td>english</td>
        <td>95</td>
   </tr>
         <tr>
        <td>john</td>
        <td>tamil</td>
        <td>90</td>
   </tr>
    </tbody>
</table>

JavaScript

$('#first').change(function() {
            var val= $(this).val();
              $('#test').each(function() {
                  if($('#test tr > td:contains('+val+')'))
                  {
                      $(this).parent().show();
                  }
                  else
                  {                          
                 $(this).parent().hide();
                  }
                              
             });
            
        });