How to hide and show table tr's by value of first row

Question

i have a question. I have table like.

  <input type="checkbox" id="one" value="Jill" checked > Jill <input type="checkbox" id="two" value="Eve" checked> Eve <input type="checkbox" id="three" value="Mike" checked> Mike <table id="mytable"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Jill</td> <td>Smile</td> <td>61</td> </tr> <tr> <td>Mike</td> <td>Jenkins</td> <td>43</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>Mike</td> <td>Piterson</td> <td>23</td> </tr> </table> 

I need to hide and show trs of this table by checked value, and hide them when field is unchecked, but only those where first row is same as value of checkbox. On load it should be visible with all checkbox checked, and if i unchecked one or more field, others should be visible. I get only to the point where i can hide, but when i checked it again it reload whole table, so i stuck. I use my old question to do this, Jquery filtering by two values . Thank you for interest.

Answer 1

Here is a js based solution

var names = document.getElementsByClassName('name');
for(var i in names)
   names[i].addEventListener('click',function(){
       var name = this.getAttribute('value');
       var table = document.getElementById('mytable').getElementsByTagName('tr');
       for(var v in table){
          var elem = table[v].getElementsByTagName('td')[0];
          if(elem.innerHTML == name) 
              table[v].style.display = table[v].style.display == 'none' ? '' : 'none';
       }
   });

https://jsfiddle.net/ezqurmbm/