CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
qusqui21
qusqui21

Reputation: 169

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

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.

Upvotes: 0

Views: 90

Answers (1)

Sam
Sam

Reputation: 2970

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/

Upvotes: 1

Related Questions