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，并在取消选中字段时隐藏它们，但仅限于第一行与checkbox的值相同的那些。在加载时，应该可以看到所有复选框都可见，如果我取消选中一个或多个字段，则其他字段应该是可见的。我只能到达我可以隐藏的地步，但是当我再次检查它时，它重新加载整个表，所以我卡住了。我用我的旧问题来做这件事，Jquery filtering by two values。感谢您的关注。

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/

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

1 个答案: