juliusss
Aug 16, 2019, updated at 11:38:25 (UTC)
view2998
view6
0
Goto Top

Javascript - 1 Filter-Funktion für Mehrere Tabellen

GermanQuestionJavaScriptDevelopment
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 face-smile

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>
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 485854

Url: https://administrator.de/contentid/485854

Printed on: April 19, 2024 at 14:04 o'clock

6 Comments
Latest comment
Goto Top
Mitglied: 140777
140777 Aug 16, 2019 updated at 12:49:13 (UTC)
Goto Top
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
Member: Juliusss
Juliusss Aug 16, 2019 updated at 14:57:06 (UTC)
Goto Top
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.
Mitglied: 140777
140777 Aug 16, 2019 updated at 15:02:27 (UTC)
Goto Top
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);
Member: Juliusss
Juliusss Aug 16, 2019 updated at 18:26:59 (UTC)
Goto Top
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.
Mitglied: 140777
140777 Aug 16, 2019 updated at 17:12:49 (UTC)
Goto Top
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.
Member: Juliusss
Juliusss Aug 16, 2019 updated at 17:54:24 (UTC)
Goto Top
OK, vielen Dank für deine Hilfe. Ich hoffe, du schaffst es noch viele Level nach oben! face-smile
GermanQuestionJavaScriptDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 3 CommentsAlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 CommentsjstrickerWIREGUARD VPN ON UDM PRO BEHIND FRITZBOX - HANDSHAKE DID NOT COMPLETEjstricker - 3 CommentsDaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment