如何通過第一行的值隱藏和顯示表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/