如何通过第一行的值隐藏和显示表tr

Question

我有个问题。 我有桌子一样。

  <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> 

我需要通过选中的值隐藏和显示此表的trs，并在未选中字段时隐藏它们，但仅隐藏第一行与复选框的值相同的字段。 在加载时，所有复选框均应可见，并且如果我未选中一个或多个字段，则其他字段也应可见。 我只到达可以隐藏的地步，但是当我再次检查它时，它重新加载了整个表，所以我卡住了。 我用我的老问题来做到这一点，即通过两个值对Jquery进行过滤 。 感谢您的关注。

Answer 1

这是一个基于js的解决方案

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/