Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Javascript - 1 Filter-Funktion für Mehrere Tabellen

Mitglied: Juliusss

Juliusss (Level 1) - Jetzt verbinden

16.08.2019, aktualisiert 13:38 Uhr, 213 Aufrufe, 6 Kommentare

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
01.
document.getElemenyByClassName
umzuschreiben, aber das hat leider nicht funktioniert.

Ich habe es geschafft, die Funktion mit
01.
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:
01.
<!DOCTYPE html>
02.
<html>
03.
<title>W3.CSS</title>
04.
<meta name="viewport" content="width=device-width, initial-scale=1">
05.
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
06.
<body>
07.

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

15.
  </ul>
16.
</div>
17.

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

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

22.
  <table class="w3-table-all w3-margin-top" id="table">
23.
    <tr>
24.
      <th style="width:60%;">Name</th>
25.
      <th style="width:40%;">Country</th>
26.
    </tr>
27.
    <tr>
28.
      <td>Alfreds Futterkiste</td>
29.
      <td>Germany</td>
30.
    </tr>
31.
    <tr>
32.
      <td>Berglunds snabbkop</td>
33.
      <td>Sweden</td>
34.
    </tr></table>
35.
</div>
36.

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

40.
  <table class="w3-table-all w3-margin-top" id="table">
41.
    <tr>
42.
      <th style="width:60%;">Name</th>
43.
      <th style="width:40%;">Country</th>
44.
    </tr>
45.
    <tr>
46.
      <td>Taxi Driver</td>
47.
      <td>Supaland</td>
48.
    </tr>
49.
    <tr>
50.
      <td>Para Glider</td>
51.
      <td>Megaland</td>
52.
    </tr></table>
53.
</div>
54.

55.
<script>
56.
function openPeople(peopleName) {
57.
  var i;
58.
  var x = document.getElementsByClassName("people");
59.
  for (i = 0; i < x.length; i++) {
60.
    x[i].style.display = "none";  
61.
  }
62.
  document.getElementById(peopleName).style.display = "block";  
63.
}
64.

65.
function searchPeople() {
66.
  var input, filter, ul, li, a, i;
67.
  input = document.getElementById("myInput");
68.
  filter = input.value.toUpperCase();
69.
  ul = document.getElementById("myUL");
70.
  li = ul.getElementsByTagName("li");
71.
  for (i = 0; i < li.length; i++) {
72.
    txtValue = li[i].textContent || li[i].innerText;
73.
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
74.
      li[i].style.display = "";
75.
    } else {
76.
      li[i].style.display = "none";
77.
    }
78.
  }
79.
}
80.

81.
function myFunction() {
82.
  var input, filter, table, tr, td, i;
83.
  input = document.getElementById("SearchCountry");
84.
  filter = input.value.toUpperCase();
85.
  table = document.getElementById("table");
86.
  tr = table.getElementsByTagName("tr");
87.
  for (i = 0; i < tr.length; i++) {
88.
    td = tr[i].getElementsByTagName("td")[0];
89.
    if (td) {
90.
      txtValue = td.textContent || td.innerText;
91.
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
92.
        tr[i].style.display = "";
93.
      } else {
94.
        tr[i].style.display = "none";
95.
      }
96.
    }
97.
  }
98.
}
99.
</script>
100.

101.
</body>
102.
</html>
Mitglied: 140777
16.08.2019, aktualisiert um 14:49 Uhr
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
Bitte warten ..
Mitglied: Juliusss
16.08.2019, aktualisiert um 16:57 Uhr
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:

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

03.
  <table class="table" id="supalandTable">
04.
    <tr>
Und im Script so:

01.
function myFunction(countryName, tableName) {
02.
  var input, filter, table, tr, td, i;
03.
  input = document.getElementByClassName("country");
04.
  filter = input.value.toUpperCase();
05.
  table = document.getElementByClassName("table");
06.
  tr = table.getElementsByTagName("tr");
07.
  for (i = 0; i < tr.length; i++) {
08.
    td = tr[i].getElementsByTagName("td")[0];
09.
    if (td) {
10.
      txtValue = td.textContent || td.innerText;
11.
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
12.
        tr[i].style.display = "";
13.
      } else {
14.
        tr[i].style.display = "none";
15.
      }
16.
    }
17.
  }
18.
}
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
01.
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.
Bitte warten ..
Mitglied: 140777
16.08.2019, aktualisiert um 17:02 Uhr
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
01.
input = document.getElementById(countryName);
und
01.
table = document.getElementById(tableName);
Bitte warten ..
Mitglied: Juliusss
16.08.2019, aktualisiert um 20:26 Uhr
Jetzt bin ich etwas verwirrt. Ich habe in meinem letzten Beispiel doch garnicht nach IDs gesucht, sondern mich an einer Lösung über
01.
input = document.getElementByClassName(country)
und
01.
table = document.getElementbyClassName(table)
versucht. Im body ist
01.
 <input class="country" id="Supaland"><table class="table" id="supalandTable">
vermerkt und jeweils die spezifische ID in
01.
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.
01.
<li class="w3-button" onclick="openPeople('Adele')">Adele</li> 
02.
<li class="w3-button" onclick="openPeople('Agnes')">Agnes</li>
das jeweils zu
01.
<div id="Adele" class="w3-container people" style="display:none">
und
01.
<div id="Agnes" class="w3-container people" style="display:none">
verweist.

Im Script sieht das dann so aus:
01.
function openPeople(peopleName) {
02.
  var i;
03.
  var x = document.getElementsByClassName("people");
04.
  for (i = 0; i < x.length; i++) {
05.
    x[i].style.display = "none";  
06.
  }
07.
  document.getElementById(peopleName).style.display = "block";  
08.
}
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.
Bitte warten ..
Mitglied: 140777
16.08.2019, aktualisiert um 19:12 Uhr
Tja aber du suchst nach den IDs in deinem Code

Zitat
01.
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.
Bitte warten ..
Mitglied: Juliusss
16.08.2019, aktualisiert um 19:54 Uhr
OK, vielen Dank für deine Hilfe. Ich hoffe, du schaffst es noch viele Level nach oben!
Bitte warten ..
Ähnliche Inhalte
JavaScript

Werteübergabe an JavaScript Funktion

gelöst Frage von tobmesJavaScript2 Kommentare

Hi Experten, ich habe hier ein kleines Problem mit meiner JavaScript Funktion. Hier mal der Aufruf der Funktion: Hier ...

JavaScript

Javascript Funktion wird nicht "aufgerufen"

gelöst Frage von StillBadJavaScript12 Kommentare

Hallo ich möchte eine Javascript AI von Code Bullet verbessern. Ich dachte das ist eine gute Idee da ich ...

JavaScript

JavaScript Funktion innerhalb einer iFrames wird nicht ausgeführt

gelöst Frage von scoobydoo100JavaScript4 Kommentare

Hallo ! Ich habe bislang auf meiner Startseite ein paar Scripte/Funktionen eingefügt, mit welchen ich in Verbindung mit einem ...

JavaScript

Javascript Funktionen

gelöst Frage von agowa338JavaScript5 Kommentare

Hallo, habe gerade mehrere schönen Javascripte per mail bekommen und frage mich gerade, was eigentlich folgendes in einem Javascript ...

Neue Wissensbeiträge
Windows 10

"Windows 10 Pro V1903: Gruppenrichtlinie "Telemetrie zulassen" aktivierbar?"

Tipp von Snowbird vor 6 StundenWindows 101 Kommentar

Sicherheits-Tools

TrendMicro Worry-Free Business Security 10.0 SP1 - Jetzt in Deutsch verfügbar! (Windows 10 1903 Support)

Tipp von TrinXx vor 1 TagSicherheits-Tools1 Kommentar

Moin! Nach wochenlangem Warten wird Trend Micro das SP1 für WFBS 10 voraussichtlich am 26.08.19 veröffentlichen. Ich habe das ...

Hyper-V
Setup VM W2016 startet nicht in Hyper-V 2016
Erfahrungsbericht von keine-ahnung vor 3 TagenHyper-V7 Kommentare

Moin, sitze gerade über meinem neuen Server und versuche, die VM auf den Host zu prügeln. Jetzt wollte ich ...

Server-Hardware

HPE Proliant ML350P Gen8 Probleme mit Zugriff auf Raid-Volumes

Erfahrungsbericht von goscho vor 3 TagenServer-Hardware1 Kommentar

Hallo Leute, das Problemgerät: HPE ML350P G8 Windows Server 2012R2 HyperV-Host 8 x 300 GB 10K SAS HDD (1 ...

Heiß diskutierte Inhalte
Server
Ein Server ins Haus stellen. Was brauche ich dafür?
Frage von JoschiTomServer15 Kommentare

Hallo Community, ich spiele mit dem Gedanken eine Server mir zu holen. Was brauche ich dafür? Und wie sind ...

Windows Server
Ist es möglich, eine deutsche W2016 Installation mit einer UK-Lizenz zu aktivieren?
gelöst Frage von keine-ahnungWindows Server10 Kommentare

Moin at all, ist ja noch Freitag. Ich habe hier noch zwei UK OEM W2016 Standard Pakete rumfliegen Muss ...

Batch & Shell
Mittels SED Text ersetzen in Anführungszeichen
gelöst Frage von nekronBatch & Shell9 Kommentare

Moin … bin nicht wirklich der SED/regex Mensch, vielleicht kann mir jemand auf die Schnelle Helfen :) ich habe ...

LAN, WAN, Wireless
Mikrotik Gast-Wlan keine Verbindung zum Internet?
Frage von dirkschwarzLAN, WAN, Wireless8 Kommentare

Guten Morgen, habe ein wahrscheinlich einfaches Problem, bei dem ich aber nicht wirklich weiter komme Ich möchte ein Gast-Wlan ...