HTML表格孩子过滤器

我创建了一个有3列的表格，第一个是客户名称，然后是一个触发第三列中表格的可见性的按钮，第三列包含一个包含用户的表格电话历史。HTML表格孩子过滤器

我已经成功创建了第一列的过滤器，并切换了第二个表的可见性。但是，在同时进行过滤和切换时，第二个表的行不显示。

HERE你可以看到我的代码的一个例子。

HTML基本代码：

<table id='table1'> 
    <tr> 
    <th>titulo1</th> 
    <th>titulo2</th> 
    </tr> 
    <tr> 
    <td>texto1</td> 
    <td> 
     <table id='table2'> 
     <tr> 
      <th>titulo1</th> 
      <th>titulo2</th> 
     </tr> 
     <tr> 
      <th>data1</th> 
      <th>data2</th> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table>

JS代码：

function filtrar() { 
     var input, filter, table, tr, td, i; 
     input = document.getElementById("myFIlterInput"); 
     filter = input.value.toUpperCase(); 
     table = document.getElementById("table1"); 
     tr = table.getElementsByTagName("tr"); 
     for (i = 0; i < tr.length; i++) { 
     td = tr[i].getElementsByTagName("td")[0]; 
     if (td) { 
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
      tr[i].style.display = ""; 
      } else { 
      tr[i].style.display = "none"; 
      } 
     } 
     } 
    }

来源

2017-05-03 Giancarlo Benítez

HTML中没有'＃myFIlterInput'。此外，没有事件，切换行为至少涉及“点击”事件。 – zer00ne

对不起，你可以用'filter ='texto1'替换过滤器;' –

有没有按钮？你提到了一个应该放在第一列的按钮？也许你应该：1.陈述你的期望。 2.陈述你实际得到的结果。 – zer00ne

事实证明，在过滤功能，隐藏td周期不仅影响那些谁是在同一水平上，但所有那些低于父亲的人。

我已经得到元素，以检查它的父，如果不是我要找的，跳过一前一后添加的第二行

td = tr[i].getElementsByTagName("td")[0]; 
if(td.parentElement.parentElement.parentElement.id != 'table1'){continue;}

。

来源

2017-05-05 14:43:35

HTML表格孩子过滤器

回答

相关问题