16.08.2019, aktualisiert um 13:38:25 Uhr

3303

Javascript - 1 Filter-Funktion für Mehrere Tabellen

Hallo zusammen,

ich bin neu bei Javascript und prompt auch schon in ein Problem gerannt, das ich nicht scheine alleine lösen zu können.
Mein Code hat 3 Funktionen. Die erste Funktion filtert eine Liste, was einwandfrei funktioniert. Die zweite Funktion (onclick) öffnet eine spezifische Tabelle in Abhängigkeit von dem zuvor ausgewählten Element. Auch das funktioniert einwandfrei. Die dritte Funktion (myFunction) filtert dann die aufgerufene Tabelle und genau hier habe ich ein Problem:
Ich weiß nicht wie ich die Funktion für mehrere bzw. verschiedene Tabellen zum Laufen kriege.

Ich habe versucht den Code mit

document.getElemenyByClassName

umzuschreiben, aber das hat leider nicht funktioniert.

Ich habe es geschafft, die Funktion mit

alltables = document.querySelectorAll("table[data-name=mytable]")

für mehrere Tabellen zum Laufen zu kriegen, allerdings werden hier ja quasi alle Tabellen im Dokument zeitgleich gefiltert und das ist nicht wirklich Sinn der Sache.

Ich würde die Funktion gerne für die jeweils spezifisch ausgewählte Tabelle zum Laufen kriegen. Es werden relativ viele Tabellen, deshalb würde ich auch ungerne unzählig viele Werte in die Funktion selbst eintragen müssen oder gar jeweils eine Funktion pro Tabelle schreiben müssen.

Für Hilfe wäre ich ziemlich dankbar

Hier der Code:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">  
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">  
<body>

<div class="w3-container">  
 
  <input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="searchPeople()">  
  <ul class="w3-ul w3-margin-top w3-hoverable" id="myUL">  
    <li class="w3-button w3-block" onclick="openPeople('Adele')">Adele</li>  
    <li class="w3-button w3-block" onclick="openPeople('Agnes')">Agnes</li>  

  </ul>
</div>

<div id="Adele" class="w3-container people" style="display:none">  

  <input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="SearchCountry" onkeyup="myFunction()">  

  <table class="w3-table-all w3-margin-top" id="table">  
    <tr>
      <th style="width:60%;">Name</th>  
      <th style="width:40%;">Country</th>  
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbkop</td>
      <td>Sweden</td>
    </tr></table>
</div>

<div id="Agnes" class="w3-container people" style="display:none">  
  <input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="SearchCountry" onkeyup="myFunction()">  

  <table class="w3-table-all w3-margin-top" id="table">  
    <tr>
      <th style="width:60%;">Name</th>  
      <th style="width:40%;">Country</th>  
    </tr>
    <tr>
      <td>Taxi Driver</td>
      <td>Supaland</td>
    </tr>
    <tr>
      <td>Para Glider</td>
      <td>Megaland</td>
    </tr></table>
</div>

<script>
function openPeople(peopleName) {
  var i;
  var x = document.getElementsByClassName("people");  
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";    
  }
  document.getElementById(peopleName).style.display = "block";    
}

function searchPeople() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");  
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");  
  li = ul.getElementsByTagName("li");  
  for (i = 0; i < li.length; i++) {
    txtValue = li[i].textContent || li[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";  
    } else {
      li[i].style.display = "none";  
    }
  }
}

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("SearchCountry");  
  filter = input.value.toUpperCase();
  table = document.getElementById("table");  
  tr = table.getElementsByTagName("tr");  
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");  
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";  
      } else {
        tr[i].style.display = "none";  
      }
    }
  }
}
</script>

</body>
</html>

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 485854

Url: https://administrator.de/forum/javascript-1-filter-funktion-fuer-mehrere-tabellen-485854.html

Ausgedruckt am: 23.04.2025 um 13:04 Uhr

6 Kommentare

Neuester Kommentar

Für sowas hat eine function "Parameter", da gibst du einfach deine Suchparameter der Function mit und erhältst so deine universell aufrufbare Funktion
https://www.w3schools.com/js/js_function_parameters.asp

Danke für die Antwort.
Ich hab jetzt auch nur den "Ausgangscode" gepostet. Ich hatte mich auch u.a. an den Parametern versucht.

Das sah dann beispielsweise so aus:

  <input class="country" type="text" placeholder="Search for names.." id="Supaland" onkeyup="myFunction('Supaland', 'supalandTable')">  

  <table class="table" id="supalandTable">  
    <tr>

Und im Script so:

function myFunction(countryName, tableName) {
  var input, filter, table, tr, td, i;
  input = document.getElementByClassName("country");  
  filter = input.value.toUpperCase();
  table = document.getElementByClassName("table");  
  tr = table.getElementsByTagName("tr");  
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");  
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";  
      } else {
        tr[i].style.display = "none";  
      }
    }
  }
}

Mein Problem ist, dass ich nicht wirklich weiß, wie ich damit umgehen soll, dass ich zwei Elemente in der Funktion habe, also einmal den Filter und einmal die spezifische Tabelle. Ich hatte beispielsweise auch probiert den Input-Filter bei

input = document.getElementById

zu belassen, um den Filter, so wie er ist, für alle Tabellen nutzen zu können. Aber nichts von alledem hat geholfen oder funktioniert.
Mir fehlt irgendwie der Stein des Anstoßes.

Naja wenn du die Parameter-Variablen countryName und tableName nirgendwo im Code einsetzt kann das ja nicht du musst sie schon im Code entsprechend einsetzen... und wenn du nach IDs suchst musst du das auch mit der entsprechenden Methode machen

input = document.getElementById(countryName);

und

table = document.getElementById(tableName);

Jetzt bin ich etwas verwirrt. Ich habe in meinem letzten Beispiel doch garnicht nach IDs gesucht, sondern mich an einer Lösung über

input = document.getElementByClassName(country)

und

table = document.getElementbyClassName(table)

versucht. Im body ist

 <input class="country" id="Supaland"><table class="table" id="supalandTable">  

vermerkt und jeweils die spezifische ID in

onkeyup="myFunction(...)"

eingetragen.

Offensichtlich ist das falsch, sonst würde es ja funktionieren ^^

Allerdings klappt es ja auch bei der "onclick"-Funktion in meinem Code.
Hier habe ich z.B.

<li class="w3-button" onclick="openPeople('Adele')">Adele</li>   
<li class="w3-button" onclick="openPeople('Agnes')">Agnes</li>  

das jeweils zu

<div id="Adele" class="w3-container people" style="display:none">  

und

<div id="Agnes" class="w3-container people" style="display:none">  

verweist.

Im Script sieht das dann so aus:

function openPeople(peopleName) {
  var i;
  var x = document.getElementsByClassName("people");  
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";    
  }
  document.getElementById(peopleName).style.display = "block";    
}

Hier die Funktion funktioniert ja einwandfrei, aber hier muss ich mich ja auch nur um ein Element kümmern, also "people" und nicht um zwei, wie bei der anderen Funktion. Und ich weiß nicht, wie ich das machen soll.

Tja aber du suchst nach den IDs in deinem Code

Zitat

onkeyup="myFunction('Supaland', 'supalandTable')

Denn deine Tables haben genau diese Bezeichnungen im ID Tag

Du musst dich schon entscheiden was du willst... Mit Klasse oder Tag oder beidem....
Du verwechselst da Jacke mit Hose.