HTML-Tabelle Childs-Filter

Question

Ich erstelle eine Tabelle mit drei Spalten, die erste ist der Kundenname, dann eine Schaltfläche, die die Sichtbarkeit einer Tabelle in der dritten Spalte auslöst, und die dritte Spalte enthält eine Tabelle mit dem Benutzer Telefonanrufe Geschichte.

Ich habe erfolgreich einen Filter für die erste Spalte erstellt und die Sichtbarkeit der zweiten Tabelle umschalten. Beim gleichzeitigen Filtern und Umschalten werden jedoch die Zeilen der zweiten Tabelle nicht angezeigt.

HERE können Sie ein Beispiel für meinen Code sehen.

HTML Basiscode:

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

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"; 
      } 
     } 
     } 
    } 

Answer 1

Es stellt sich heraus, dass der Zyklus in der Filterfunktion, die td nicht nur versteckt betrifft diejenigen, die auf dem gleichen Niveau sind aber all jene, die unter dem Vater sind.

Ich habe die zweite Zeile

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

hinzugefügt, nachdem das Element immer seine Eltern zu prüfen, ob nicht die ist, die ich suche, es überspringen.